是否已弃用clearfix？ [英] Is clearfix deprecated?

问题描述

您知道这个古老的问题：包含浮动元素的容器不会自动扩展其高度以包含子女。

You are aware of the age-old problem: Containers containing floated elements don't automatically expand their height to enclose their children.

一种解决方法是clearfix，它添加了一些CSS规则，以确保容器能够正常展开。

One approach to fix this is the "clearfix" which adds a number of CSS rules to ensure a container stretches properly.

但是，只是给容器 overflow：hidden 似乎也工作正常，并且具有相同的浏览器兼容性。

However, just giving the container overflow: hidden seems to work just as well, and with the same amount of browser compatibility.

根据

According to this guide, both methods are compatible across all browsers that are important today.

这意味着clearfix已被弃用？在 overflow：hidden ？

Does this mean that "clearfix" is deprecated? Is there any advantage left in using it over overflow: hidden?

中使用它是否还有任何优势这里有一个非常类似的问题： a href =http://stackoverflow.com/questions/1642565/what-is-the-different-between-clearfix-hack-and-overflowhidden-vs-overflowauto> clearfix hack和overflow之间的区别是什么：hidden vs溢出：auto？
但问题没有真正回答。

There is a very similar question here: What is the different between clearfix hack and overflow:hidden vs overflow:auto? but the question isn't really answered there.

推荐答案

几乎所有时间都使用 overflow：hidden 。

但 。下面是一个示例：

But, there are exceptions. Here's an example of one:

水平溢出容器div但不垂直

问题是：

• 这里有固定高度： http://jsfiddle.net/je8aS/2/


• 没有固定高度： http://jsfiddle.net/thirtydot/je8aS/ 5 /


• 如何在不使用固定高度的情况下清除浮动广告？


• overflow：hidden 无效： http://jsfiddle.net/thirtydot/je8aS/ 6 /


• 您必须使用其他方法清除浮动广告，例如 clear：both ：
  
  http://jsfiddle.net/je8aS/3/


• clearfix类也可以使用：http://jsfiddle.net/thirtydot/je8aS/11/

• There's a fixed height on this: http://jsfiddle.net/je8aS/2/
• Without the fixed height: http://jsfiddle.net/thirtydot/je8aS/5/
• How to clear the floats without using a fixed height?
• overflow: hidden doesn't work: http://jsfiddle.net/thirtydot/je8aS/6/
• You have to use some other method of clearing floats, such as clear: both:
  http://jsfiddle.net/je8aS/3/
• The clearfix class also works: http://jsfiddle.net/thirtydot/je8aS/11/

这里是一个更重要的例子，当你不能使用 overflow：hidden ：

Here's a more important example of when you can't use overflow: hidden:

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

这不是说clearfix是替代 - display：inline-block 干净地修复了这个例子：

That's not to say that clearfix is the only alternative - display: inline-block cleanly fixes that example:

http://jsbin.com/ubapog

这篇关于是否已弃用clearfix？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！