为什么浮动子代时父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

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

overflow:hidden在容器上进行设置将通过建立新的块格式化上下文来避免这种情况。见包含花车方法的其他方法和含彩车有关为何CSS设计这样的解释。