Mastering CSS

Clearfix hack

If we look at the following CSS, right below our reset, these rulesets make up our clearfix:

/* clearfix */ 
.grouping:before, 
.grouping:after { 
  content: " "; 
  display: table;  
} .grouping:after {   clear: both; } 

This code was actually part of our base layer of CSS. Basically, what this does is create a pseudo element before and after any element with a class of grouping. This pseudo element has a blank space for content and the display is set to table. Then we have the after pseudo element beneath that chunk of code, which has the clear property set on it and clears any floats before it.

You might sometimes see clearfix as the class name instead of grouping. I tend to use grouping because I think it makes more sense; you're kind ...