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.
.clearfix:after { content: ""; display: block; clear: both;}.clearfix { //display: inline-block;}
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:
visibility: hidden; line-height: 0; height: 0;
and to get rid of one more IE6 specific selector used for the same reason.
* html .clearfix { height: 1%;}
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:
html[xmlns] .clearfix { display: block;}
after IE’s “inline-block”.