How to use clearfix in css to achieve clear floating

The clearfix method of css realizes clear floating: first, when you need to clear the floating, just write a [.clearfix]; then just add the clearfix class name to the element that needs to be cleared of floating.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

Css clearfix method to achieve clear floating:

Definition of clearfix:

.clearfix:after {}{
content: "."; /**//*内容为“.”就是一个英文的句号而已。也可以不写。*/
display: block; /**//*加入的这个元素转换为块级元素。*/
clear: both; /**//*清除左右两边浮动。*/
visibility: hidden; /**//*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/
line-height: 0; /**//*行高为0；*/
height: 0; /**//*高度为0；*/
font-size:0; /**//*字体大小为0；*/
}
.clearfix {}{ *zoom:1;} /**//*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

Principle of clearfix :

1. Under IE6 and 7, zoom: 1 will trigger hasLayout, thereby closing the internal float of the element.

2. Under standard browsers, the .clearfix:after pseudo-class will insert a clear: both block-level element after the element applied to .clearfix, thereby clearing the float.

3. When you need to clear floats, just write a .clearfix, and then add the clearfix class name to the element that needs to be cleared.

Related tutorial recommendations: CSS video tutorial

The above is the detailed content of How to use clearfix in css to achieve clear floating. For more information, please follow other related articles on the PHP Chinese website!