CSS CSS容器div没有获得高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7817269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS container div not getting height
提问by Neel Basu
回答by Nightfirecat
Add the following property:
添加以下属性：
.c{
...
overflow: hidden;
}
This will force the container to respect the height of all elements within it, regardless of floating elements.
http://jsfiddle.net/gtdfY/3/
这将强制容器尊重其中所有元素的高度，而不管浮动元素如何。
http://jsfiddle.net/gtdfY/3/
UPDATE
更新
Recently, I was working on a project that required this trick, but needed to allow overflow to show, so instead, you can use a pseudo-element to clear your floats, effectively achieving the same effect while allowing overflow on all elements.
最近，我在做一个需要这个技巧的项目，但需要允许溢出显示，因此，您可以使用伪元素清除浮动，有效地实现相同的效果，同时允许所有元素溢出。
.c:after{
clear: both;
content: "";
display: block;
}
回答by Yoeri
You are floating the children which means they "float" in front of the container. In order to take the correct height, you must "clear" the float
您正在漂浮孩子，这意味着他们“漂浮”在容器前面。为了采取正确的高度，您必须“清除”浮动
The div style="clear: both" clears the floating an gives the correct height to the container. see http://css.maxdesign.com.au/floatutorial/clear.htmfor more info on floats.
div style="clear: both" 清除浮动并为容器提供正确的高度。有关浮动的更多信息，请参阅http://css.maxdesign.com.au/floatutorial/clear.htm。
eg.
例如。
<div class="c">
<div class="l">
</div>
<div class="m">
World
</div>
<div style="clear: both" />
</div>
回答by Antonio Romero Oca
It is not that easier?
这不是更容易吗？
.c {
overflow: auto;
}
回答by lee
Try inserting this clearing div before the last </div>
尝试在最后一个之前插入这个清除 div </div>
<div style="clear: both; line-height: 0;"> </div>
<div style="clear: both; line-height: 0;"> </div>
回答by Agata
The best and the most bulletproof solution is to add ::beforeand ::afterpseudoelements to the container. So if you have for example a list like:
最好的和最防弹解决方案是增加::before和::afterpseudoelements到容器。因此，如果您有一个列表，例如：
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
</ul>
And every elements in the list has float:leftproperty, then you should add to your css:
并且列表中的每个元素都有float:left属性，那么你应该添加到你的 css 中：
.clearfix::after, .clearfix::before {
content: '';
clear: both;
display: table;
}
Or you could try display:inline-block;property, then you don't need to add any clearfix.
或者您可以尝试display:inline-block;属性，然后您不需要添加任何clearfix。
