In-depth understanding of the usage of clearfix in css

If there is a p as an external container, and the internal p is set to float style, the external container p cannot be opened because there is no clear inside. Look at the example below:

pThe 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 as shown below:

Traditional human solution:

However, it is a bit inappropriate to add a p so many times. One is that there is an extra meaningless p, and the other is that when using dojo to do Drag & Drop, since this p is a byte point of the container p, if this node is moved, it will cause layout bugs: If you want The p in the displayed blue box is moved after this p, and because of clear:both, it will be forced to be displayed on a new line. Therefore, it is best to use the clearfix method below. Add clearfix style to outer p.

clearfix is ​​defined as follows:

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

The display will be normal after this modification.

That code is used to clear floats.

The following code can be explained like this:

.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容；   
    content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。   
    display: block;   <----加入的这个元素转换为块级元素。   
    clear: both;     <----清除左右两边浮动。   
    visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；   
    height: 0;     <----高度为0；   
    font-size:0;    <----字体大小为0；   
}

The entire code is equivalent to following the floating element Followed by an empty p with a width and height of 0, and then set it to clear: both to achieve the effect of clearing floats. (The principle of this CSS is to use the after pseudo-object, which will add the content in the content at the end of the element to which clearfix is ​​applied, that is, a ".", and set it as a block-level element (display="block"); height Set it to 0, clear="both", and then hide its content (visibility="hidden"). This will expand the block-level element.)

The reason why you use it is because, you There is no need to write a large number of meaningless empty tags in the html file, and the floating tags can be cleared.

.clearfix { *zoom:1;}

The above in-depth understanding of the usage of clearfix in css (a must-read article) is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more in-depth understanding of the usage of clearfix in css and related articles, please pay attention to the PHP Chinese website!

Related articles:

In-depth analysis of clearfix to clear floats

A brief discussion on the usage of clearfix and clear in css

CSS about clearfix clearing floating method

The most comprehensive CSS clearfix clearing floating method