子がフローティングしているときに親divの高さがゼロになるのはなぜですか

私の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がこのように設計された理由についての説明をします。

通常、floatsは親のレイアウトには含まれません。

それを防ぐoverflow: hiddenには、親に追加します。

これが正しい方法かどうかはわかりませんdisplay: inline-block;が、ラッパーdivに追加することで解決しました。

#wrapper{
    display: inline-block;
    /*border: 1px black solid;*/
    width: 75%;
    min-width: 800px;
}

.content{
    text-align: justify; 
    float: right; 
    width: 90%;
}

.lbar{
    text-align: justify; 
    float: left; 
    width: 10%;
}