. Clearfix:after (Clear float) detailed explanation of each attribute and value

Clear float. Clearfix:after A word, engaged in the Web front-end friends are not unfamiliar with it, the following for you to introduce the meaning of all the attributes and values used in Clearfix:after, interested friends can refer to the next ha think, I hope to help you

 

The following code can explain this:

Copy Code code as follows:


. clearfix:after {<----add content to the back of the element with class name "Clearfix";


content: "."; <----content is "." It's just a period of English. Or you can not write.


Display:block; <----This element is converted to block-level elements.


Clear:both; <----Clear the left and right sides of the float.


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 of 0;


height:0; <----height of 0;


font-size:0; <----font size 0;


}


. Clearfix {*zoom:1} <----This is for IE6 because IE6 does not support: After pseudo classes, this magical zoom:1 allows IE6 elements to be cleared to wrap the inner element. The specific meaning of words, do not delve into, heard that Microsoft's engineers themselves can not explain clearly. The height:1% effect is the same.

The entire code is equivalent to following a floating element with a width of 0 empty Div, and then set it clear:both to achieve the effect of clearing the float.
It is used because you do not have to write a large number of meaningless empty tags in the HTML file, and you can clear the float.

In other words, your code is a burden, so it's not good for maintenance.
Just write one. Clearfix, and then add the Clearfix class name to the element that needs to be cleared floating.
Such as:

Copy Code code as follows:


<div class= "head clearfix" ></div>