Question

我曾经添加<div style='clear:both'></div>来清除以前段中的浮点数，但有人建议我应该使用overflow:auto上的<div>代替浮点数，因为它更简单，更干净。

问题是，我得到报告称我的网站中有一些奇怪的“阴影”。在调查之后，事实证明它发生在Chrome中，而不是在Firefox中，而那些“阴影”实际上是非常小的滚动条。

我试图在这个jsfiddle http://jsfiddle.net/57HM3/4/中将部件减少到最小。注意它们是在右边（它的位置是'结果'）。它似乎与行高有关，如果我将它设置为1.2而不是1.1它就会消失。这是某种已知问题（我不知道）吗？

我知道还有其他方法可以清除它们，但它们涉及IE特定代码，而不是。我想保持它原样，只是将浮点数作为溢出使用div：auto（如果这不起作用，我宁愿回到我添加额外的<div>

Answer 1

添加overflow:hidden而非。这将清除你的两个，不会添加任何滚动

Answer 2

不要带着溢出的猴子。我推荐一个“clearfix”解决方案。这是我使用的，我把它放在每个项目开头的所有样式表的顶部：

/* CLEAR-FIX */
.clearfix:after { 
    visibility: hidden; display: block; font-size: 0; 
    content: " "; clear: both; height: 0; 
}
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

...很久以前我就不记得在博客上了。

任何需要使用浮点数增长的容器都需要添加“clearfix”类：

<div class="test" class="clearfix">
    <div style="float:left">Hello</div>
    <div style="float:left">World</div>
</div>

顺便说一句，如果你想知道为什么 CSS，浮动通常不算作父母身高的一部分，请参阅：Why do non-floating parents of floating elements collapse?

Answer 3

如果您想保留容器overflow:auto的{{1}}规则，可以尝试从div类中删除line-height规则。

溢出：在Chrome，IE中自动添加滚动条

3 个答案: