CSS容器div没有得到高度答案

【问题标题】：CSS container div not getting heightCSS容器div没有得到高度
【发布时间】：2011-12-10 15:54:40
【问题描述】：

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

【问题讨论】：

【解决方案1】：

添加以下属性：

.c{
    ...
    overflow: hidden;
}

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

更新

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

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

【讨论】：

基本上，添加此属性会强制外框忽略浮动容器所具有的规则，即不计算容器高度的规则，并将其应用于完整的背景绘图。
哇，我当时想，“什么？那行不通。”但我会被诅咒的。我完全认为它不会正常运行。谢谢
这不是很 hacky 吗？对我来说，它违背了溢出的目的。我不明白为什么这是正确且最受好评的答案。
@AndrewWeir 我承认，直到现在，我还不能完全确定为什么这种扩展容器以正确考虑浮动大小的方法有效。 According to several sources，似乎这会导致元素更改其渲染模式，从允许可见溢出到 不允许 这样做，并且这样做会强制元素禁止溢出。
第一种方法，使用溢出，对我有用。第二种方式 ALSO 也有效，并且在我将来溢出的情况下似乎风险较小。我只希望我能投票两次。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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>

【讨论】：

这很清楚：两者；事情似乎是容器高度的适当解决方案，因为问题是浮动的孩子。所以这种方法似乎比溢出更好：隐藏；上面一个。
感谢@Yoeri 分享这个简单的解决方案。竖起大拇指！我正在为我的新设计寻找相同的解决方案，因为自从我专注于 PHP 开发视角而不是设计方面之后，我上次设计 Web 布局已经将近 6 年了。

【解决方案4】：

不是那么容易吗？

.c {
    overflow: auto;
}

【讨论】：

【解决方案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了。

【讨论】：

【解决方案6】：

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

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

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

【讨论】：