增加包含浮动嵌套div的父div的高度

Question

我似乎无法根据其浮动子div自动增长我父亲div的身高。所有的孩子都漂浮着，水平占据空间，然后包裹到下一行。浮动子项的数量可能会发生变化，父项必须自动调整其高度。 （父div用作所有浮动div s的背景。在父div下方还有第二个div需要向下推，因此它低于浮动div。

解决方案在IE中起作用非常重要。

Answer 1

如果父容器只有浮动子容器，则它没有高度。将以下CSS添加到父容器应该有帮助：

.parent {
    overflow:hidden;
    width: 100%;
}

阅读本文了解更多信息：http://www.quirksmode.org/css/clearing.html。

Answer 2

您可以在最后一个孩子之后插入一个清除浮动符的div。

HTML：

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->

小提琴：http://jsfiddle.net/Rc5J8/

Answer 3

你需要clear浮动元素，父母的高度会崩溃。

当前接受的答案是正确的，但通常最好通过将the clearfix hack或overflow: hidden应用于包装父元素来清除浮点数，以便边距继续按预期运行并摆脱一个空的HTML元素。

overflow - 方法：

<强> CSS：

.wrap { overflow: hidden }
.box  { float: left; }

<强>标记：

<div class="wrap">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

clearfix - 方法，如上所述：

<强> CSS：

.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after { clear: both; }
.cf { *zoom: 1; }

.box { float: left; }

<强>标记：

<div class="wrap cf">

    <div class="box">
        Content
    </div>

    <div class="box">
        Content
    </div>

</div>

Answer 4

您应该在包含div

上使用clearfix技术

http://www.webtoolkit.info/css-clearfix.html

这消除了添加额外标记的需要。

Answer 5

在父元素上添加overflow css属性将解决问题（不需要空的＆amp; ugly div元素来清除浮动）：

.parentelement {
    overflow:auto;
    display: block;
    width: 100%;
}

我添加了显示和宽度属性，因为某些浏览器需要定义这些属性。

Answer 6

您需要将clearfix应用于父级，因为从文档流中删除了浮点数并且不会自动向父级内容添加任何高度。 Clearfix指示父母延伸到足够高的高度以清除其最后一个浮动的孩子。 This method已经建立并且可以跨浏览器使用。