We all remember good old “clearfix” (www.webtoolkit.info/css-clearfix.html) that we use to clear floats.

This is a new “lighter” version, based on the same principle.

The major difference from the original clearfix is that we use blank content (“”) in “:after”, instead of “.” in the original one. That helps us to get rid of three extra lines of code, which purpose was to hide this dot:

and to get rid of one more IE6 specific selector used for the same reason.

If you not too concerned about validity of your CSS you could leave the code as it is, else you can put .clearfix {//display:inline-block;} (the IE specific declaration) into separate IE Only CSS, or use the same trick, as per original clearfix – redefine “inline-block” to simply “block” for not IE, using:

after IE’s “inline-block”.