. Clearfix:after Clear Floating

.clearfix:after{font-size:0; }

. Clearfix{*zoom:1;}


Individual attribute explanations:
. clearfix:after {<----add content to the element in the class named "Clearfix";
Content: ""; <----content.
Display:block; <----This element into a block-level element.
Clear:both; <----clear left and right side floats.
Visibility:hidden; <----visibility is set to hidden. Pay attention to it and display:none; there is a difference. Visibility:hidden, still occupy space, just can't see it;
line-height:0; <----row height is 0;
height:0; <----height of 0;
font-size:0; <----font size is 0, can avoid a lot of empty lines of the bug;
}
. clearfix {*zoom:1;} <----This is for IE6 because IE6 does not support: After Pseudo-class, this magical zoom:1 allows IE6 elements to clear floats to wrap inside elements. The specific meaning, do not have to delve into, heard that Microsoft's engineers themselves can not explain clearly. The height:1% effect is the same.

. Clearfix:after Clear Floating