CSS 容器 div 没有得到高度

我想让我的容器 div 得到它的子容器的最大高度。不知道孩子的 divs 有多高。我在 JSFiddle台试播。集装箱 div是红色的。没有出现。为什么？

106828 次浏览
小开
最佳答案

添加以下属性:

.c{
...
overflow: hidden;
}

这将强制容器尊重其中所有元素的高度，而不管浮动元素是什么。
Http://jsfiddle.net/gtdfy/3/

更新

最近，我在做一个项目，需要这个技巧，但需要允许溢出显示，因此，你可以使用一个伪元素来清除浮点数，有效地实现同样的效果，同时允许所有元素上的溢出。

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

Http://jsfiddle.net/gtdfy/368/

小开

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

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

小开

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

Div 样式 = “ clear: both”清除浮动的 an 给出容器的正确高度。有关花车的更多信息，请参见 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>
小开

没那么简单吧？

.c {
overflow: auto;
}
小开

The best and the most bulletproof solution is to add ::before and ::after pseudoelements to the container. So if you have for example a list like:

<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。

小开

我遇到了同样的问题，我想出了四个可行的解决方案:

  1. 使容器 display: flex;(这是我最喜欢的解决方案)
  2. 向容器中添加 overflow: auto;或 overflow: hidden;
  3. 为容器添加以下 CSS:
.c:after {
clear: both;
content: "";
display: block;
}
  1. Make the following the last item inside the container:
<div style="clear: both;"></div>

提交答案