我使用yaml 进行布局，并使用著名的clearfix css 来确保带有浮动的容器得到扩展。
在 Firefox 3、IE6、IE7、IE8、Opera 9 和 Google Chrome 上一切正常，但我在 Firefox 1、Firefox 2 和 SeaMonkey 上遇到问题。问题是 clearfix 容器扩展过多，正如您在网站上看到的那样：
http://www.slagalica.tv/game/mojbroj
更新： Screenshots on BrowserShots.org
不幸的是，统计数据显示超过 10% 的访问者正在使用 FF2，所以我不能简单地忽略这个问题。我尝试删除或调整 clearfix CSS 的某些部分，但无论我做什么，计时器 DIV（绿色）都与页面的其余部分有很大的距离。
有人知道如何解决这个问题吗？
Update2：我终于放弃并放置了 TABLE 标签，并在几分钟内解决了这个问题。所以，不要尝试查看 HTML 源代码 - 问题不再明显。
【问题讨论】：
因此，如果您查看在 positioniseeverything 上推广 clearfix 的原始文章，您会注意到作者建议，由于该修复程序已过时，因此读者应该查看有关 sitepoint 的文章。这篇sitepoint文章指出了一种我已经使用了很长时间的方法。
非常简单，如果你给父溢出：隐藏并确保它在 IE 中有“布局”，那么这将清除内部浮动。
<div id="wrapper">
<div id="leftcol">
Text
</div>
<div id="rightcol">
text
</div>
</div>
然后是对应的CSS：
#wrapper{
overflow:hidden;
width: 100%;
}
#leftcol{
float:left;
width: 50%;
}
#rightcol{
float:right;
width: 50%;
}
在上面的示例中，我使用width: 100% 为IE 提供布局，但如果您愿意，也可以轻松使用zoom: 1 或height: 1%。
尝试用这种技术替换 clearfix，您的问题应该会得到解决。
使用这种技术要记住的事情，注意你的内部宽度，否则你可能会被剪裁，并且在你的打印样式表中覆盖包装是很重要的溢出：可见，否则它只会打印第一页。但是我多年来一直在生产中成功地使用这种方法，而且我从来没有遇到过任何无法解决的问题。
【讨论】：
clearfix 只是为懒惰或痴迷的纯粹主义者提供的一个技巧。在需要的地方（在 div 的底部）放置一个 clearing div，然后继续生活。
<div>
... floated content ...
<div style="clear:both"></div>
</div>
顺便说一句。声称这破坏语义的纯粹主义者是不正确的。 HTML 规范没有为<div> 定义语义含义。在最坏的情况下，它混合了样式/结构，但当将来重新设计网站并且纯 css 解决方案变得实用时，它几乎不会成为一个负担。
【讨论】：
<div>（和<span>）定义为通用容器...我没有看到<div> 包含任何内容。跨度>
我使用 browsershots 查看了它，我非常努力地弄清楚它在 FF2、3 和 chrome 中的区别是什么。我没看到。
看看你的页面，为什么不按照这些思路做点什么？
<div id='wrapper'>
<div id="leftcol">
Text
</div>
<div id="rightcol">
text
</div>
<div id="foot">
text
</div>
</div>
还有 CSS：
#wrapper{
min-height:1%; //to fix IE6 floats escaping ancestor div
}
#leftcol{
float:left;
}
#rightcol{
float:left;
}
#foot{
clear:both;
}
【讨论】：
似乎这是一个错误，并已在较新版本中修复。但是，为了保持兼容性，必须使用表格而不是 CSS。
【讨论】：