Is Clearfix Obsolete in the Face of `overflow: hidden`?

Is Clearfix Obsolete?

The age-old dilemma has persisted for containers with floated children: how to ensure they expand their height appropriately. While clearfix, a CSS tweak, has traditionally served this purpose, a simpler solution has emerged: overflow: hidden. Both techniques boast excellent browser compatibility, raising the question: is clearfix now redundant?

Advantage of Overflow: Hidden

Generally, overflow: hidden effectively handles most clearfix scenarios. However, there are some exceptions.

Horizontal Overflow with Vertical Containment

Consider a container div with a fixed height and horizontally overflowing floated elements. Overflow: hidden fails to resolve the vertical containment issue, requiring an alternative float clearing method, such as clear: both or the clearfix class.

Overflow Container Example

Furthermore, overflow: hidden presents challenges in specific scenarios. Take the example at http://fordinteractive.com/misc/overflow/. While overflow works in some cases, it fails in others. Alternative solutions, such as display: inline-block, can resolve these issues more elegantly, as demonstrated in http://jsbin.com/ubapog.

Conclusion

While overflow: hidden has gained prominence for float clearing in many scenarios, it is not a universal solution. For exceptions like horizontal overflow with vertical containment, clearfix or other float clearing techniques remain valuable tools in a web developer's arsenal.

The above is the detailed content of Is Clearfix Obsolete in the Face of `overflow: hidden`?. For more information, please follow other related articles on the PHP Chinese website!