如何在不破坏包含元素高度的情况下在 div 中使用“float:left”？答案

【问题标题】：How can I use "float: left" in a div without breaking the containing element's height?如何在不破坏包含元素高度的情况下在 div 中使用“float:left”？
【发布时间】：2009-02-19 03:30:15
【问题描述】：

浮动的 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 的解决方案？

【问题讨论】：

标签： html css css-float

【解决方案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

【讨论】：

我不敢相信它有效，但它确实有效。哇。新接受的答案。

【解决方案2】：

是的。您应该在 div 关闭时清除浮动。

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

【讨论】：

【解决方案3】：

您需要清除浮动，这会使文档流恢复正常。在应该重置流的最后一个元素上使用clear:left（或右，或两者，如果需要清除此类浮动）。另请阅读ClearFix。需要注意的是，ClearFix 在 IE 上可能会有点粘...如果您可以控制标记，有时使用传统的 clear 会更安全。

【讨论】：

不敢相信这么简单。出于某种原因，我认为这不起作用，但确实如此。谢谢！

【解决方案4】：

你需要清除浮动 Clear Fix

Some more information

【讨论】：

【解决方案5】：

我强烈建议不要使用像 ClearFix 这样的黑客。如果您尝试保存

因为它不是“语义的”，那么您将给自己带来麻烦。最好，如果你知道你的布局不会改变，或者你可以确定下一个元素是什么，你可以使用下一个元素来清除以前的“浮动”。如果你需要一些模块化的东西，比如一段可以插入到不同地方的 HTML，那么总是添加清除 DIV。

关于大卫的评论：

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

小心，因为那不是有效的 HTML 或 XHTML。尽管从 XML 的角度来看它似乎是有效的，但它不尊重文档定义（无论它被称为什么，由 DOCTYPE 标记引用）。换句话说，DIV 被定义为一个可以打开和关闭的元素，并使用单独的结束标记。例如，与
相反，它允许“自动关闭”。当然，Firebug 和可能的其他 Web 开发人员工具有时会以这种方式显示 DIV，但这就是它们的显示方式。

PPS：在我的工作中，我发现这在某些布局中效果很好，可以在 IE6 和其他浏览器中清除 DIV 时修复元素之间不一致的垂直间距：

跨浏览器清零：

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

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

永远不要为此使用内联样式。首先，您会经常需要它，其次，正如您在上面看到的，更改清除规则以解决一些跨浏览器问题可能会派上用场。

【讨论】：

同意，为了简单起见，示例中的内联样式就在那里。我也更喜欢在我的 CSS 中避免特定于浏览器的 hack。我最终做的很像你展示的。尽管如此，我还是很欣赏像 ClearFix 这样的想法的链接，这样我就可以了解它们并了解它们是如何工作的。

【解决方案6】：

在我的 Vista 上的 IE7 中呈现良好。您使用的是什么版本的 IE 和什么平台？

【讨论】：

这个特殊的例子在 IE 中对我来说很好用。但是，在另一个我正在做类似事情的网站上，它在 IE 中不起作用。我不确定为什么这个确切的代码会这样做。怪癖模式渲染？