html - 如何使 DIV 匹配浮动子元素的高度（浮动列）并允许子元素在侧面突出

Question

我正在设计一个具有 3 列的布局，基于包含 3 个浮动 div 的 div。

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

为了解决这个问题，我尝试使用 overflow:hidden 并成功了，但我的设计有一个 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/

Answer 3

假设我已经正确理解了这个问题，您可以使用清除 div：

   <div id="dre">
        <div class="float" style="height:100px"></div>
        <div class="float" style="height:200px"></div>
        <div class="float" style="height:30px"></div>
        <div id="clear"></div>
    </div>

在这里看到它 - http://jsfiddle.net/C7FCC/