html - 2 つのブロック レベル要素。並べて配置するために両方にフロートが必要なのはなぜですか?

Question

これはフロートに関する非常に基本的な質問ですが、検索エンジンで答えを見つけることができませんでした。

2 つのブロック レベル要素 (たとえば div) があり、それらを隣り合わせにする必要がある場合、それらの最初の要素に float:left プロパティを与えるだけでは不十分なのはなぜですか? 2 番目の div を最初の div の下ではなく 1 番目の横に配置するために、両方の div をフロートする必要があるのはなぜですか?

コード例を次に示します。

HTML

<div id="box_wrap">
    <div id="box1">
        <h2>Box1 text</h2>
        <p>Lorem Ipsum</p>
    </div>
    <div id="box2">
        <h2>Box2 text</h2>
        <p>Lorem Ipsum</p>
        <p>Text</p>
    </div>

</div>

CSS

#box1 {
    background-color: blue;
    width: 30%;
    float: left;
}

#box2 {
    background-color: red;
    width: 30%;
    float: left;
}