如何使一个DIV与浮动子元素的高度匹配（浮动列），并允许子元素在两侧突出？

Question

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

问题是容器div的高度与我想要的列的高度不匹配。它表现得好像根本没有内容，因此三个列向上突出。

为了解决这个问题，我尝试使用overflow:hidden，这样做确实起到了作用，但我的设计中有一个向左突出的div，这个属性会让它混乱。

有没有更好的方法来解决高度问题？谢谢。

- Frildoren

---

展示你的HTML文件，展示你当前的CSS样式表，以及一个你想要实现的页面效果图片。最理想的情况是，提供一个SSCCE的在线演示代码，这样我们可以更清楚地看到问题所在，并更容易地给出建议和演示修改方法。基本上就是：帮助我们来帮助你。（如果需要在问题中提供更多信息，请使用标签下方的“编辑”链接；请不要试图将代码粘贴在评论中。） - David Thomas

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>并应用相同的样式。

- Kristian

Answer 2

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

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

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

- thpnk

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/

- Alex