如何使DIV匹配浮动子的高度(浮动列),并允许子元素在侧面突出

Question

我正在设计一个包含3列的布局,基于包含3个浮动div的div.

问题是容器div与我想要的列高度不匹配.它就好像根本没有内容,因此3列垂直突出.

为了解决这个问题,我尝试使用溢出:隐藏并且它成功了,但是我的设计有一个在左边突出的div,因为这个属性不会让任何东西突然出现.

有没有更好的方法来解决身高问题？谢谢.

Answer 1

你通常可以通过<div style="clear:both;"></div>在所有孩子之后向右投掷来使容器的高度延伸到孩子的尽头......就像这样.

<div id="container">
    <div class="child0"></div>
    <div class="child1"></div>
    <div class="child2"></div>

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

我不确定这是否被社区视为黑客攻击.但我有时会用它.另外,我见过人们不会使用div,但<hr>也会使用这种风格.

Answer 2

使用 clearfix 类 - 应该可以完成这项工作：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

检查http://jsfiddle.net/YyMjJ/1/