How to Best Clear CSS Floats in 2014 and Beyond?

Clearing CSS Floats: Best Practices

The question of effectively clearing CSS floats has evolved over time, with various techniques emerging. While using
has been a common practice, it may not align with the current best practices.

Modern Approach:

In 2014, a clearfix technique utilizing pseudo-elements is recommended. This method involves applying the following CSS:

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

.cf:after {
    clear: both;
}

This technique works in modern browsers. For further optimization, micro clearfix as devised by Nicholas Gallagher can be used:

.cf {
    *zoom: 1;
}

Original Solution:

An alternative solution favored by those who prefer to avoid unnecessary markup is to use overflow: hidden or overflow: auto on the parent element. This effectively clears the floats cross-browser without requiring extra elements.

Summary:

In 2014, the clearfix technique with pseudo-elements represents the recommended method for clearing floats in a browser-independent manner. However, the overflow method remains a viable option for those who prioritize minimizing markup.

The above is the detailed content of How to Best Clear CSS Floats in 2014 and Beyond?. For more information, please follow other related articles on the PHP Chinese website!