解决方案1:

最可靠和不引人注目的方法似乎是:

演示:http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

通过一点CSS目标，您甚至不需要向父DIV添加类。

这个解决方案向后兼容IE8，所以你不需要担心旧的浏览器失败。

解决方案2:

有人建议对解决办法1进行调整，具体如下:

演示:http://jsfiddle.net/wXaEH/162/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

该解决方案似乎向后兼容IE5.5，但未经测试。

解决方案3:

也可以设置display: inline-block;宽度:100%;在不折叠的情况下模拟一个正常的块元素。

演示:http://jsfiddle.net/SO_AMK/ae5ey/

CSS:

.clearfix {
    display: inline-block;
    width: 100%;
}

该解决方案应该向后兼容IE5.5，但只在IE6中进行了测试。

理想的解决方案是对列使用内联块，而不是浮动。我认为浏览器的支持是非常好的，如果你遵循(a)应用内联块的元素通常是内联的(如span);(b)为Firefox添加-moz-inline-box。

在FF2中检查你的页面，因为我在嵌套某些元素时遇到了很多问题(令人惊讶的是，这是IE比FF表现更好的一种情况)。

与其把overflow:auto放在父对象上，不如把overflow:hidden放在父对象上

我为任何网页写的第一个CSS总是:

div {
  overflow:hidden;
}

那我就再也不用担心了。

虽然代码不是完美的语义，但我认为在每个容器的底部都有一个我称之为“清除div”的东西会更直接。事实上，我在每个项目的重置块中都包含了以下样式规则:

.clear 
{
   clear: both;
}

如果你正在为IE6设计样式(上帝帮助你)，你可能想给这个规则一个0px的line-height和height。

我认为最好的方法是明确:既要对即将到来的元素。

原因如下:

1):after选择器在IE6/7中不支持，在FF3中有bug，但是 如果你只关心IE8+和FF3.5+清除:after可能对你来说是最好的…

2) overflow应该做一些其他的事情，所以这个hack不够可靠。

作者注意:在清算方面没有什么hack…清除意味着跳过浮动字段。CLEAR是自HTML3(谁知道呢，也许更久)http://www.w3.org/MarkUp/html3/deflists.html以来就与我们在一起了，也许他们应该选择一个有点不同的名字，比如page: new，但这只是一个细节…

我在适用的情况下使用2和4(即当我知道内容的高度或溢出不会造成伤害时)。在其他地方，我用解3。顺便说一下，您的第一个解决方案与3个解决方案相比没有任何优势(我可以发现)，因为它使用了相同的虚拟元素，因此没有更多的语义。

顺便说一下，我不担心第四个解决方案是一个黑客。CSS中的黑客只有在其底层行为受到重新解释或其他变化的影响时才会有害。这样，你的黑客就不能保证有效。然而，在这种情况下，你的黑客依赖于溢出的确切行为:auto是意味着有。搭顺风车也无妨。