119

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

4

6 回答 6

288

添加以下属性：

.c{
    ...
    overflow: hidden;
}

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

更新

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

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

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

于 2011-10-19T06:21:27.933 回答
28

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

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>
于 2011-10-19T06:24:42.940 回答
20

这不是那么容易吗？

.c {
    overflow: auto;
}
于 2014-10-14T07:48:37.500 回答
4

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

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

于 2011-10-19T06:21:55.420 回答
3

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

于 2017-02-08T10:06:06.250 回答
2

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

  1. 制作容器display: flex;（这是我最喜欢的解决方案）
  2. 添加overflow: auto;或overflow: hidden;到容器
  3. 为容器添加以下 CSS：
.c:after {
    clear: both;
    content: "";
    display: block;
}
  1. 使以下内容成为容器内的最后一项：
<div style="clear: both;"></div>
于 2020-10-05T00:41:31.720 回答