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