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

.clear 
{
   clear: both;
}

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

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

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

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

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

div {
  overflow:hidden;
}

那我就再也不用担心了。

奇怪的是，还没有人提出一个完整的答案，啊，好吧，就是这样。

解决方案一:明确:两者都有

添加一个block元素，样式为clear:both;on它将清除经过该点的浮点数，并阻止该元素的父元素折叠。http://jsfiddle.net/TVD2X/1/

优点:允许你清除一个元素，你在下面添加的元素不会被上面的浮动元素和有效的css影响。

缺点:需要另一个标记来清除浮动，膨胀的标记。

注意:回到IE6，让它在禁欲的父母(即输入元素)上工作，你不能使用:after。

解决方案二:显示:表

添加显示:表;到父节点，使它摆脱浮动并显示正确的高度。http://jsfiddle.net/h9GAZ/1/

优点:没有额外的标记，更整洁。支持IE6+

缺点:需要无效的css来确保在IE6和7中一切都很好。

注意:IE6和ie7 width auto用于防止宽度为100%+填充，这在新浏览器中不是这样的。

关于其他“解决方案”的说明

这些修复可以回溯到最低支持的浏览器，全球使用率超过1% (IE6)，这意味着使用:after并不能解决问题。

溢出隐藏显示内容，但不防止元素折叠，因此不回答问题。使用内联块可能会有错误的结果，孩子有奇怪的边距等等，表要好得多。

设置高度确实“防止”了坍塌，但这不是一个合适的解决办法。

无效的css

无效的css不会伤害任何人，事实上，它现在是常态。使用浏览器前缀就像使用浏览器特定的黑客一样无效，并且不会影响最终用户。

总之

我使用上述两种解决方案来使元素正确地反应并彼此良好地发挥作用，我恳求你也这样做。

clearfix有几个版本，Nicolas Gallagher和Thierry Koblentz是主要作者。

如果你想要支持旧的浏览器，最好使用这个clearfix:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

在SCSS中，你应该使用以下技术:

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

如果你不关心对旧浏览器的支持，有一个更短的版本:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

您可能会发现，将overflow更改为自动或隐藏的主要问题是，所有内容都可以通过鼠标中键滚动，用户可能会弄乱整个网站布局。