2

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

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

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

我知道还有其他方法可以清除它们，但它们涉及 IE 特定的代码，而不是什么。我想保持原样，只是将带有浮动的 div 设置为 overflow:auto （如果这不起作用，我宁愿回去添加额外的<div>

4

3 回答 3

4

添加overflow:hidden而不是。这将清除您的两者并且不会添加任何滚动

于 2012-08-06T14:40:37.957 回答
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 会导致浮动通常不计为父级高度的一部分，请参阅：为什么浮动元素的非浮动父级会崩溃？

于 2012-08-06T14:51:04.187 回答
0

如果要保留overflow:auto容器的规则div，可以尝试line-height从类中删除规则.test。

于 2012-08-06T14:53:14.003 回答