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

同样，页面显示良好。这种行为只是令我困惑。

134240 次浏览
小开
最佳答案

浮动的内容不影响其容器的高度。元素中没有不浮动的内容(因此没有任何内容会阻止容器的高度为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%;
}
小开

现在你可以了

#wrapper { display: flow-root; }

提交答案