So verwenden Sie Clearfix in CSS, um ein klares Floating zu erreichen

Css-Clearfix-Methode, um ein klares Floating zu erreichen: Wenn Sie das Floating löschen müssen, schreiben Sie einfach einen [.clearfix] und fügen Sie dann einfach den Clearfix-Klassennamen zu dem Element hinzu, das gelöscht werden muss.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

Css-Clearfix-Methode zum Erreichen eines klaren Floatings:

Definition von 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的元素可以清除浮动来包裹内部元素。*/

Prinzip von Clearfix:

1. Unter IE6 löst 7 Zoom: 1 hasLayout aus und schließt somit das interne Float des Elements .

2. Unter Standardbrowsern fügt die Pseudoklasse .clearfix:after nach dem auf .clearfix angewendeten Element ein Element auf Blockebene ein, wodurch der Float gelöscht wird.

3. Wenn Sie Floats löschen müssen, schreiben Sie einfach eine .clearfix und fügen Sie dann den Clearfix-Klassennamen zu dem Element hinzu, das gelöscht werden muss.

Verwandte Tutorial-Empfehlungen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Clearfix in CSS, um ein klares Floating zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!