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" 清除浮动并为容器提供正确的高度。请参阅 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

 

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

4. 将以下内容作为容器内的最后一项：

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

Answer 7

我刚刚遇到了同样的问题，经过一些研究，我相信在包含元素上使用 display: flow-root 是正确的方法。

来自 MDN 上的 clear财产：

如果一个元素只包含浮动元素，它的高度就会消失。如果您希望它始终能够调整大小，以便其内部包含浮动元素，请将元素的 display 属性的值设置为 flow-root。

因此，虽然 clear: Both 有效（正如其他答案所暗示的那样），但它实际上旨在根据浮动元素的高度正确地将其他元素定位在同一容器内内部。 display: flow-root 应该用于使包含元素尊重其所有子元素的高度，以便其他元素（例如包含元素的兄弟）元素）可以正确定位。