CSS容器div没有得到高度

我想让我的容器div得到它的孩子身高的最大值。而不知道孩子将会有多高。我正在尝试使用JSFiddle 。容器div是红色的。这是不显示。为什么？

添加以下属性：

 .c{ ... overflow: hidden; }

这将迫使容器尊重其中所有元素的高度，而不pipe浮动元素。
http://jsfiddle.net/gtdfY/3/

UPDATE

最近，我正在研究一个需要这个技巧的项目，但是需要允许溢出显示，所以可以使用一个伪元素来清除浮点数，从而实现相同的效果，同时允许所有元素溢出。

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

你漂浮的孩子，这意味着他们“浮”在容器前面。为了采取正确的高度，你必须“清除”浮动

例如。

 <div class="c"> <div class="l"> </div> <div class="m"> World </div> <div style="clear: both" /> </div>

这不是那么容易吗？

 .c { overflow: auto; }

尝试在最后一个</div>之前插入这个清除div

<div style="clear: both; line-height: 0;"> </div>

最好也是最坚固的解决scheme是在容器中添加::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。