The Lab

4. Jan 2012

CSS pseudo element clearfix

This clearfix stays clear of the markup. No need of adding class="clearfix" to your HTML elements. This is pure CSS.

Styling the :after

Let's start off by styling all :after pseudo elements.

:after { display:block; clear:both; }

The rendering time is basically unaffected by adding these styles as there are no matching pseudo elements to apply them to (yet). The performance doesn't drop until you actually generate the pseudo elements, which we'll do next:

Generating the :after

The advantage of styling the general :after first is that you can now generate these whenever you like using only the content property. I like to add them throughout the stylesheet right after the floating element they're clearing.

#el:after { content:""; }

Credits

This fix is inspired by Nicolas Gallagher's micro clearfix.

Demo

Test it!

Back to Grimsrud Interaktiv