html - 是否弃用了 clearfix？

Question

您知道这个由来已久的问题:包含 float 元素的容器不会自动扩展它们的高度来包围它们的子元素。

解决此问题的一种方法是 "clearfix"它添加了许多 CSS 规则以确保容器正确拉伸(stretch)。

然而，仅仅给容器 overflow: hidden 似乎同样有效，并且具有相同的浏览器兼容性。

根据 this guide ，这两种方法都兼容当今重要的所有浏览器。

这是否意味着“clearfix”已被弃用？与 overflow: hidden 相比，使用它还有什么优势吗？

这里有一个非常相似的问题:What is the different between clearfix hack and overflow:hidden vs overflow:auto? 但问题并没有真正得到解答。

Answer 1

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

但是， 也有异常(exception)。这是一个示例:

Overflowing a container div horizontally but not vertically

问题是:

• 这里有一个固定的高度:http://jsfiddle.net/je8aS/2/
• 没有固定高度:http://jsfiddle.net/thirtydot/je8aS/5/
• 如何在不使用固定高度的情况下清除 float ？
• 溢出:隐藏 不起作用:http://jsfiddle.net/thirtydot/je8aS/6/
• 您必须使用其他一些清除 float 的方法，例如clear: both:
  http://jsfiddle.net/je8aS/3/
• clearfix class也适用:http://jsfiddle.net/thirtydot/je8aS/11/

---

这是一个更重要的例子，说明何时不能使用 overflow: hidden:

http://fordinteractive.com/misc/overflow/

这并不是说 clearfix 是唯一替代方案 - display: inline-block 彻底修复了该示例:

http://jsbin.com/ubapog