我希望我的容器div可以获取其所有子元素的最大高度，而不需要知道子元素div的实际高度。我在JSFiddle上尝试了一下，但是容器div（红色）没有显示出来。为什么呢？
7个回答
288
添加以下属性：
.c{
...
overflow: hidden;
}
这将强制容器尊重其中所有元素的高度，而不考虑浮动元素。
http://jsfiddle.net/gtdfY/3/
更新
最近，我正在开发一个需要此技巧的项目，但需要允许溢出显示，因此，您可以使用伪元素来清除浮动，从而实现相同的效果，同时允许所有元素溢出。
.c:after{
clear: both;
content: "";
display: block;
}
- Nightfirecat
8
8基本上，添加此属性会强制外部容器忽略浮动容器的规则，即它们在计算容器高度时不被考虑，并将其应用于完整的背景绘制。 - Nightfirecat
4哇，我当时就觉得：“什么？那不可能行。”但是我错了。我本来以为它不会正常运作。感谢！ - fie
1这不是很hacky吗？对我来说，这违背了溢出的目的。我不明白为什么这是正确的并且得到了最多的赞。 - Andrew Weir
3直到现在，我并不完全确定为什么使用这种方法可以正确地考虑容器中的浮动元素大小。根据几个来源（http://www.quirksmode.org/css/clearing.html、http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow、http://annevankesteren.nl/2005/03/clearing-floats、http://www.mezzoblue.com/archives/2005/03/03/clearance/），似乎这会导致元素更改其呈现模式，从允许可见溢出变为*不允许*，从而强制元素不允许该溢出。 - Nightfirecat
2第一种方法，使用溢出，对我有效。第二种方法也有效，并且在将来可能存在溢出的情况下似乎更少风险。但愿我能投两次赞。 - Tyler Collier
显示剩余3条评论
28
你正在浮动子元素，这意味着它们“浮动”在容器的前面。 为了获取正确的高度，您必须“清除”浮动。
div 样式="clear: both" 清除浮动并为容器提供正确的高度。有关浮动的更多信息，请参见http://css.maxdesign.com.au/floatutorial/clear.htm。
例如：
<div class="c">
<div class="l">
</div>
<div class="m">
World
</div>
<div style="clear: both" />
</div>
- Yoeri
2
这个 clear: both; 的方法似乎是解决容器高度的正确方案，因为问题出在浮动子元素上。因此，与上面的 overflow: hidden; 方法相比，这种方法似乎更好。 - Ronnie Depp
感谢@Yoeri分享这个简单的解决方案。点赞！我正在寻找相同的解决方案，因为自从我专注于PHP开发方面而非设计方面后，已经有将近6年没有设计过网页布局了。 - Ronnie Depp
20
这难度不太大吧？
.c {
overflow: auto;
}
- Antonio Romero Oca
1
是的，没错 :D。谢谢。 - Alauddin Ahmed
4
尝试在最后一个 </div> 前插入这个清除浮动的 div：
<div style="clear: both; line-height: 0;"> </div>
- lee
3
最好、最可靠的解决方案是向容器添加::before和::after伪元素。因此，如果您有例如以下列表：
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
如果列表中的每个元素都具有 float:left 属性，则应将以下内容添加到您的 CSS 中：
.clearfix::after, .clearfix::before {
content: '';
clear: both;
display: table;
}
或者你可以尝试使用
display:inline-block;属性，这样你就不需要添加任何clearfix。- Agata
2
我遇到了同样的问题，我想出了四种可行的解决方案：
- 将容器设置为
display: flex;（这是我最喜欢的解决方案） - 在容器中添加
overflow: auto;或overflow: hidden; - 为容器添加以下CSS：
.c:after {
clear: both;
content: "";
display: block;
}
将以下内容作为容器的最后一项：
<div style="clear: both;"></div>
- star8163264
0
我遇到了同样的问题，经过一些研究，我认为在包含元素上使用display: flow-root是正确的方法。
来自MDN关于clear属性：
如果一个元素只包含浮动元素，则其高度会折叠为零。如果您希望它始终能够调整大小，以便其中包含浮动元素，请将元素的display属性的值设置为flow-root。
因此，虽然clear: both可以工作（正如其他答案所建议的那样），但它实际上是设计用来正确定位同一容器内的其他元素内部，并尊重浮动元素的高度。应该使用display: flow-root来使包含元素尊重其所有子元素的高度，以便其他元素（例如包含元素的兄弟姐妹）可以正确定位。
- ifloop
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接