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

我过去常常添加一个

来清除前面片段中的浮动，但有人建议我应该在

上使用

溢出：auto

来代替浮动，因为它更简单、更干净

问题是，我收到报告说，有一些奇怪的'阴影'在我的网站。经过调查，结果表明这种情况发生在Chrome上，而不是Firefox上，而且这些“阴影”实际上是非常小的滚动条

在这个JSFIDLE中，我试图将部件减少到最小。请注意，它们位于最右侧（此处显示“结果”）。这似乎与线条高度有关，如果我将其设置为1.2而不是1.1，它将消失。这是某种已知的问题（我不知道）

---

我知道还有其他方法可以清除它们，但它们涉及IE特定的代码，等等。我想保持原样，只需将带浮点数的div设置为overflow:auto（如果这不起作用，我宁愿继续添加额外的

添加

溢出：隐藏
，而不是。这将清除两者，并且不会添加任何滚动条不要使用溢出。我建议使用“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通常不将浮动计算为父级高度的一部分，请参阅：
如果您想保留容器
div
的
溢出：自动
规则，您可以尝试从
.test
类中删除
行高
规则。
但是它会增长以容纳浮动吗（无需我指定高度）既然我没有限制任何地方的高度，为什么要添加滚动条呢？是的，它在小提琴中起作用。我仍然不知道为什么要添加滚动条，因为没有指定高度，这是一个错误吗？默认的div高度大约是20px。所以如果div包含的高度大于20px，那么它将卷轴。