How Can I Efficiently Clear Floats in Modern CSS Without Extra Markup?

Best Practices for Clearing Floats in Modern CSS

In the realm of CSS, clearing floats has been a persistent challenge, with various techniques emerging over the years. While the use of
> has been a common approach, it introduces unnecessary HTML markup. Modern CSS offers more elegant and efficient solutions for this problem.

Pseudo-Element Approach:

In 2014, the preferred technique is to utilize pseudo-elements to create a clearfix. This involves adding the following styles to the parent container of the floated elements:

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

.cf:after {
  clear: both;
}

This method is effective in all modern browsers and avoids the need for additional HTML elements.

Overflow Property:

Another cross-browser solution is to set the overflow property of the parent container to hidden or auto. This has the effect of clearing the floats within the container, without requiring additional markup:

.container {
  overflow: hidden;
}

Micro Clearfix:

For an even more minimal approach, Nicholas Gallagher has proposed a micro clearfix technique:

.cf {
  zoom: 1;
}
.cf:before,
.cf:after {
  display: table;
}

.cf:after {
  clear: both;
}

This technique combines the overflow property with pseudo-elements to achieve the same result as the clearfix technique mentioned earlier.

Avoiding JavaScript Hacks:

It is advisable to avoid using JavaScript hacks for this purpose. JavaScript can have varying levels of support in different browsers, and it may not always be available or enabled when needed. Therefore, it is more reliable to use CSS-based solutions for cross-browser compatibility.

The above is the detailed content of How Can I Efficiently Clear Floats in Modern CSS Without Extra Markup?. For more information, please follow other related articles on the PHP Chinese website!