origin :
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
illustrate :
* Apply the first declaration block to most standard-compliant browsers, with the goal of creating an invisible null block to clear floating for the target element.
*The second item applies the inline-table display attribute for clearfix, only for IE/Mac.
*Use* / Hide some rules from IE/Mac:
* height:1% is used to trigger haslayout under IE6.
*Reapply block display properties to IE outside IE/Mac.
*The last line is used to end the hack for IE/Mac.
Since this method is targeted at browsers that have become history (especially IE5 on Mac), or are on the way to standards, this method is no longer as progressive as the times.
After throwing away support for IE/Mac, a new method of clearing floating:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
illustrate :
IE6 and IE7 neither support the :after pseudo-class, so the next two are needed to trigger the haslayout of IE6/7 to clear the float. Fortunately, IE8 supports :after pseudo-classes. Therefore, only the hack for IE6/7 is needed.