为什么浮动孩子时父div高度为零

Question

我的 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 的末尾……为什么会这样？

再次，页面呈现良好。这种行为让我很困惑。

Answer 1

现在，你可以

#wrapper { display: flow-root; }

• 兼容性https://caniuse.com/flow-root
• 历史https://css-tricks.com/snippets/css/clear-fix/

Answer 2

我不确定这是不是正确的方法，但我通过将 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%;
}

Answer 3

浮动内容不会影响其容器的高度。该元素不包含不浮动的内容（因此没有什么可以阻止容器的高度为 0，就好像它是空的一样）。

在容器上设置overflow: hidden 将通过建立一个新的block formatting context 来避免这种情况。请参阅methods for containing floats 了解其他技术，并参阅containing floats 了解为什么 CSS 会以这种方式设计。

Answer 4

通常，floats 不计入其父母的布局中。

为防止这种情况发生，请将overflow: hidden 添加到父级。