Clear floating new words

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 :

• *Applies the first declaration block to most standards-compliant browsers, with the goal of creating an invisible empty-content block that clears floats for the target element.
• *The second item applies the inline-table display attribute for clearfix, only for IE/Mac.
• *Exploit* / Hide some rules from IE/Mac:
• * height:1% is used to trigger haslayout under IE6.
• *Reapply block display attribute to IE other than IE/Mac.
• *The last line is used to end the hack for IE/Mac.

Since the browsers targeted by this method have become history (especially IE5 under Mac), or are on the way to becoming standards, this method is no longer so up to date.

After dropping support for IE/Mac, new method of clearing floats:

/* 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 :

Neither IE6 nor IE7 supports the :after pseudo-class, so the next two are needed to trigger IE6/7's haslayout to clear floats. Fortunately IE8 supports the :after pseudo-class. So only hacks for IE6/7 are needed.