如何在一个 div 中使用 "float: left" 而不破坏包含元素的高度？

Question

似乎浮动的HTML元素不会扩展其容器的高度。例如，考虑以下代码：

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}

<div class="portfoliosite">
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

注意到灰色背景的包含 div 比红色 div 短，而红色 div 超出了容器的边界。我希望包含元素能够扩展到其内容的大小，包括浮动元素。

有没有一种优雅的解决方案来实现这个目标，最好不涉及设置固定高度或使用 JavaScript？

- Joshua Carmody

Answer 1

在包含元素上添加overflow: auto：

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
    overflow: auto;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}

<div class="portfoliosite">
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

请参见：http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats

- Lee Henson

---

我简直不敢相信它能够工作，但它确实可以。哇，新的被接受的答案。 - Joshua Carmody

Answer 2

是的。在div结束时应该清除浮动。

<div>
  <div style="float:left">Floated Div</div>
  <div style="clear:both;" />
</div>

- David

Answer 3

你需要清除浮动，以使文档流返回正常。在最后一个应重置流的元素上使用clear:left（或right，或两者都需要清除），也可以阅读关于ClearFix的内容。需要注意，ClearFix在IE中可能会有一些问题...如果您对标记有控制权，有时使用传统的clear更安全。

- Rex M

---

简直不敢相信这么简单。出于某种原因，我认为它不起作用，但实际上它确实有效。谢谢！ - Joshua Carmody

Answer 4

我强烈建议不要使用像ClearFix这样的hack。如果你试图保存一个<div class="clear"></div>，因为它不是“语义化”的，那么你将会在以后遇到麻烦。最好的方法是，如果你知道你的布局不会改变，或者你可以确定下一个元素是什么，你可以使用下一个元素来清除之前的“浮动”。如果你需要一些模块化的东西，比如可以插入到各个地方的HTML片段，那么总是添加清除DIV。

此外，关于David的评论：

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

请注意，这不是有效的HTML或XHTML。虽然从XML的角度来看似乎是有效的，但它并不遵守文档定义（无论它被称为什么，都是由DOCTYPE标记引用的）。换句话说，DIV被定义为一个打开的元素，并且需要使用单独的闭合标签进行关闭。与<BR/>相反，后者允许“自我关闭”。当然，Firebug和可能其他的Web开发工具有时会以这种方式显示DIV，但那只是它们的显示方式。

附言：在我的工作中，我发现在某些布局中，清除IE6和其他浏览器中DIV的不一致垂直间距时，这个方法效果很好：

跨浏览器清除：

div.clear { clear:both; overflow:hidden; height:0; }

<div class="clear"></div>

请勿在此处使用内联样式。首先，您经常需要它，其次，正如您上面所看到的，更改清除规则以解决一些跨浏览器问题可能会很方便。

- user58777

---

同意，内联样式只是为了在示例中简化而存在。我也更喜欢避免在我的CSS中使用特定于浏览器的hack。我最终做的很像你展示的方式。尽管如此，我还是很感谢像ClearFix这样的链接，这样我就知道它们的作用并且可以看到它们的工作原理。 - Joshua Carmody

Answer 5

你需要清除浮动 清除浮动(Clear Fix)

更多信息(Some more information)

- NTulip

Answer 6

在我的Vista上，我的IE7渲染得很好。您使用的是哪个版本的IE和哪个平台？

- user65663

---

这个特定的例子在IE中对我来说运行良好。然而，在另一个我正在做类似操作的站点上，在IE中它不起作用。我不确定为什么这段精确的代码会有问题。是混杂模式渲染吗？ - Joshua Carmody