是否已弃用clearfix？

如何解决是否已弃用clearfix？

您几乎可以一直使用overflow: hidden。

正如另一个答案中提到的那样hidden，它的缺点是，它会令人惊讶地使ermm隐藏下拉菜单之类的内容。但是，通过浮动父容器，还有另一种包含一行的方法。这通常适用于overflow: hidden有缺点的地方，并且浮动功能可以解决许多旧版IE问题，尤其是在列表中。如果可以使用宽度，则可以使用“浮点数浮动”或display: inline-block。

我并不是说“ clearfix”没有用-但对我而言，它已经根深蒂固地融入了CMS主题（如wordpress和Drupal），我认为在很多情况下，它的使用量过多且在div上实际上并不需要要清除或包含。

我实际上无法想到无法在clearfix上使用溢出或浮动的情况，但是我的大脑处于假日模式-但是，clearfix是一种复制/粘贴解决方案，有时是最容易推荐的方法，但是，它必须是为IE设置hasLayout的元素，当然，现在溢出和浮动也都可以。

补充说，这又出现了：大脑不在假期模式下。

我真的开始认为是的，没有必要使用clearfix（至少我还没有找到一个示例），即使上述@thirtydot的示例也可以解决，display: inline-block并且仍然支持IE6，容器具有固定的宽度具有IE7及以下的hasLayout要求，并且通过使其成为所有其他浏览器的内联块，可以将其居中，并且“ offset”粘性元素在容器确实垂直拉伸时也可以正常工作

例我还看到了针对那些使用:before以及:after在clearfix hack中崩溃的边距的新改进的clearfix 的引用，但是除非我缺少该演示有缺陷的东西 - pre元素和“ clearfixed”框中的空格不均实际上并不包含任何浮点数，一旦您将其中的元素浮点了，每种方法都将执行相同的操作。

请注意，pre元素上的边距无论如何都不会与其他元素反应（因此，请使用填充而不是边距进行尝试，以便在测试时看到相同的图片）..还有另一个IE“易碎品”，如果它们没有明确指定，并且在演示中的上有明确的边距，h2但并非p如此，因此所有与TJK在该页面中演示的固定元素相同的情况是人为地强迫将边距包含在普通块元素中，与1px顶部/底部填充的方式几乎相同，因为浏览器的操作方式有所不同！

如果您确实将这些元素浮动在这些容器内（无论如何清除的话）-则边距确实包含了它们可能想要的内容，就像它们在新的Block Formatting Context中一样-没有任何额外:before的内容，所有clearfix版本均能很好地工作！

因此，在我看来，不再需要这种“ clearfix”方法，只需为旧版IE使用haslayout找到创建新块格式上下文的最佳方法即可。两者的属性都相同！

正如TJK在他的文章中指出的那样：http ://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

更好的选择

如果可以对包含浮点数的元素应用宽度，那么最好的选择是使用：

display: inline-block; width: <any
  explicit value>;

我认为这很公平，即使100％的元素可能需要填充，您也可以结合使用 Box-sizing

.clearfix {
  display: inline-block;
  width: 100%;
  *width: auto;
  -moz-Box-sizing: border-Box;
  -webkit-Box-sizing: border-Box;
  Box-sizing: border-Box;
}

解决方法

您已经意识到了一个古老的问题：包含浮动元素的容器不会自动扩展其高度以围封其子级。

解决此问题的一种方法是“clearfix”，它添加了许多CSS规则以确保容器正确延伸。

但是，仅提供容器overflow: hidden似乎同样有效，并且具有相同的浏览器兼容性。

这是否意味着不建议使用“ clearfix”？使用它还有什么优势overflow: hidden吗？

这里有一个非常相似的问题：clearfixhack和overflow：hidden与overflow：auto有什么区别？
但问题并没有得到真正答案。