Чому материнська висота діва дорівнює нулю, коли в ньому плавали діти

У моєму 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 був розроблений таким чином.

Зазвичай, floatвони не враховуються у макеті своїх батьків.

Щоб цього не допустити, додайте 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%;
}