代码之家 › 专栏 › 技术社区 › Joshua Carmody

如何在div中使用“float:left”而不破坏包含元素的高度?

css-float css html

Joshua Carmody · 技术社区 · 17 年前

浮动的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>

6 回复 | 直到 9 年前

TylerH Ash Burlaczenko 9 年前

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

David 17 年前

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

Rex M 17 年前

您需要清除浮动,使文档流恢复正常。使用 clear:left ClearFix 。应该注意的是,ClearFix可能会对IE有点粘……如果你能控制标记,有时使用传统的clear会更安全。

IEnumerator 17 年前

你需要清除浮子 Clear Fix

Some more information

user58777 17 年前

我强烈建议不要使用像ClearFix这样的黑客。如果你想拯救一个<div class=“clear”></div>因为这不是“语义上的”,你最终会给自己带来麻烦。最好,如果你知道你的布局不会改变,或者你可以确定下一个元素是什么,你可以使用下一个元件来清除之前的“浮点数”。如果你需要模块化的东西,比如一段可以插入到不同位置的HTML,那么一定要添加清除DIV。

关于David的评论:

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

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

跨浏览器清除:

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

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

永远不要使用内联样式。首先,你会经常需要它,其次,正如你可以在上面看到的,改变明确的规则来解决一些跨浏览器的问题可能会派上用场。

fig 17 年前

在Vista上的IE7中渲染良好。IE&你使用什么平台?