CSS容器div没有得到高度

Question

我希望我的容器div能够达到孩子身高的最大高度.不知道孩子div的身高.我正在试用JSFiddle.容器div是红色的.没有出现.为什么？

Answer 1

添加以下属性:

.c{
    ...
    overflow: hidden;
}

无论浮动元素如何,这都将强制容器遵守其中所有元素的高度.
http://jsfiddle.net/gtdfY/3/

UPDATE

最近,我正在开发一个需要这个技巧的项目,但需要允许溢出显示,所以相反,你可以使用一个伪元素来清除你的浮点数,有效地实现相同的效果,同时允许溢出所有元素.

.c:after{
    clear: both;
    content: "";
    display: block;
}

基本上,添加此属性会强制外部框忽略浮动容器具有的规则,它们不在容器的高度计算,并将它们应用于完整的背景图. (8认同)
但为什么这个'溢出'有效呢？我不明白？ (5认同)
哇,我想,"什么？那不行." 但我会被愚弄.我完全认为它不会表现得很好.谢谢 (4认同)
@AndrewWeir我承认,直到现在,我还没有完全确定为什么这种扩展容器的方法能够正确地考虑其尺寸的浮子.[根据](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/),似乎这导致一个元素改变它的渲染模式,从允许可见溢出到*不*这样做,这样做会强制元素禁止溢出. (3认同)
第一种方式,使用溢出,对我有用.ALSO工作的第二种方式,如果我将来有溢出,似乎风险较小.我只希望能两次投票. (2认同)

Answer 2

你漂浮了孩子,这意味着他们"漂浮"在容器前面.为了获得正确的高度,你必须"清除"浮子

div style ="clear:both"清除浮动a给容器正确的高度.有关浮点数的更多信息,请参见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>

Answer 3

它不是那么容易吗？

.c {
    overflow: auto;
}