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

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

最著名的解决方案之一是您的解决方案3的变体，它使用伪元素而不是非语义html元素。

大概是这样的……

.cf:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

你把它放在你的样式表中，你所需要做的就是将类'cf'添加到包含浮点数的元素中。

我用的是尼古拉斯·加拉格尔的另一个变体。

它做同样的事情，但它更短，看起来更整洁，可能用来完成另一件非常有用的事情——防止子元素的边缘与它的父元素的边缘一起崩溃(但为此你确实需要其他东西-阅读更多关于它的信息，请点击http://nicolasgallagher.com/micro-clearfix-hack/)。

.cf:after {
    content: " ";
    display: table;
    clear: float;
}

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

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

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

.clear 
{
   clear: both;
}

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

Another possible solution which I think is more semantically correct is to change the floated inner elements to be 'display: inline'. This example and what I was working on when I came across this page both use floated divs in much exactly the same way that a span would be used. Instead of using divs, switch to span, or if you are using another element which is by default 'display: block' instead of 'display: inline' then change it to be 'display: inline'. I believe this is the 100% semantically correct solution.

解决方案1，浮动父文件，本质上是将整个文档更改为浮动文件。

解决方案2，设置一个显式的高度，就像画一个框，然后说我想在这里放一张图片，也就是说，如果你在做一个img标签，就使用这个。

解决方案3，添加一个间隔来清除浮动，就像在你的内容下面添加一个额外的行，也会混淆周围的元素。如果你使用这种方法，你可能想把div的高度设置为:0px。

解决方案4,overflow: auto，是承认您不知道如何布局文档，并且您承认您不知道该做什么。

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

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