html - 为什么当它有 float 的 child 时父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

float 的内容不会影响其容器的高度。该元素不包含不 float 的内容(因此没有什么能阻止容器的高度为 0，就好像它是空的)。

在容器上设置overflow: hidden 将通过建立一个新的block formatting context 来避免这种情况。 .参见 methods for containing floats用于其他技术和containing floats了解为什么 CSS 是这样设计的。