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

Question

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

解决方案在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浮动元素,他们的父母的高度将崩溃.

当前接受的答案是正确的,但通常应该通过应用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-method,如上地连接:

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>