[解決済み] フローティングの子を持つ親Divの高さが0になる理由

質問

私のCSSには以下のようなものがあります。すべてのマージン/パディング/ボーダーはグローバルに0にリセットされます。

#wrapper{width: 75%; min-width: 800px;}
.content{text-align: justify; float: right; width: 90%;}
.lbar{text-align: justify; float: left; width: 10%;}

というようにHTMLを書くと

<div id="wrapper">
    <div class="content">
        some text here
    </div>
    <div class="lbar">
        some text here
    </div>
</div>

を実行すると、ページは正しく表示されます。しかし、要素を検査すると div#wrapper であることが表示されます。 0px を高くしています。の最後まで拡大すると思っていたのに。 div.content と div.lbar ... なぜこのようなことが起こるのでしょうか？

繰り返しになりますが、ページは正常に表示されます。この動作は私を当惑させるだけです。

どのように解決するのですか?

浮いているコンテンツは、そのコンテナの高さに影響を与えません。要素にはフローティングでないコンテンツは含まれていません (そのため、コンテナが空であるかのように、コンテナの高さが 0 になることを止めるものはありません)。

設定 overflow: hidden を設定することで、コンテナに新しい ブロックフォーマットコンテキスト . 参照 メソッドに含まれる浮動小数点数 を、また 浮動小数点演算を含む は、CSS がこのように設計された理由についての説明です。