The use of CSS clearfix in-depth understanding

If there is a p as an external container, the internal p if the float style is set, the outer container p cannot be stretched because it has no clear inside. Look at the following example:

The P layout is as follows:

The CSS code is as follows:

. out{border:1px solid #F00; width:500px;}   . inner1{width:200px; height:200px; float:left; border:1px solid #00F;}   . inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}

IE and FF display such as:

Traditional people solutions:

But it's a bit inappropriate to add a p. One is more than a meaningless p, the second is to use Dojo to do drag & drop, because this p is a byte point of the container p, if the node is moved, it will cause a typographical bug: if the blue box to display p is moved to this p, then because of Clear:both, It will be forced to display in a different line. Therefore, it is best to use the following Clearfix method. The outer p plus the Clearfix style.

Clearfix is defined as follows:

. Clearfix:after{visibility:hidden;display:block;font-size:0;content: ""; clear:both;height:0;}   . Clearfix{*zoom:1;}

This changes to show normal later.

That piece of code is used to clear the float.

The following code can explain this:

. clearfix:after {       <----add to the back of the element with the class name "Clearfix"; content       : ".";     <----content is "." is a full stop in English. can also not write.       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. Still occupy space, just can't see it;       height:0;     <----height of 0;       font-size:0;    <----font size is 0;   }

The entire code is equivalent to a floating element followed by a width of 0 of the empty p, and then set it clear:both to achieve the effect of clear floating. (The principle of this CSS is to use the after pseudo-object, which will add content in the contents at the end of the element that applies clearfix, which is a ".", and set him as a block-level element (display= "block"); height set to 0,clear= " Both "and then hide its contents (visibility=" hidden "). This will open up this block-level element.)

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.

. 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.

The above-mentioned CSS Clearfix usage in-depth understanding (Must see) is a small part of the whole content to share to everyone, hope to give you a reference, but also hope that we support a lot of topic.alibabacloud.com.