How to use clearfix in css to achieve clear floating

coldplay.xixi
Release: 2023-01-03 09:29:24
Original
2528 people have browsed it

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.

How to use clearfix in css to achieve clear 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的元素可以清除浮动来包裹内部元素。*/
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template