CSS容器div没有得到高度

Question

我希望我的容器div能够获得孩子身高的最大高度。不知道孩子div的高度。我正在尝试JSFiddle。容器div为红色。没有出现。为什么呢？

Answer 1

添加以下属性：

.c{
    ...
    overflow: hidden;
}

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

更新

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

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

http://jsfiddle.net/gtdfY/368/

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;
}

Answer 4

尝试在最后</div>

之前插入此结算div

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

Answer 5

最好和最防弹的解决方案是将::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。

Answer 6

我遇到了同样的问题，并且提出了四个可行的解决方案：

1. 制作容器display: flex;（这是我最喜欢的解决方案）
2. 将overflow: auto;或overflow: hidden;添加到容器中
3. 为容器添加以下CSS：

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

1. 使以下内容成为容器中的最后一项：

<div style="clear: both;"></div>