5

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

4

6 回答 6

16

添加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

于 2009-02-19T13:29:55.513 回答
9

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

<div>
  <div style="float:left">Floated Div</div>
  <div style="clear:both;" />
</div>
于 2009-02-19T03:37:52.363 回答
4

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

于 2009-02-19T03:33:04.153 回答
1

您需要清除浮动 清除修复

更多信息

于 2009-02-19T03:33:24.963 回答
1

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

另外关于大卫的评论：

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

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

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

跨浏览器清除：

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

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

Don't use an inline style for this, ever. First you will need it often, and second, as yo ucan see above, it may come in handy to change the clear rule to fix some cross browser troubles.

于 2009-02-19T22:43:38.287 回答
0

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

于 2009-02-19T03:34:39.750 回答