css中clearfix清除浮动的用法及其原理示例介绍

最新推荐文章于 2025-01-21 13:40:14 发布

转载最新推荐文章于 2025-01-21 13:40:14 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pao8041/p/5691492.html

本文介绍了clearfix浮动清除的方法，包括在IE6,7下通过zoom:1触发hasLayout以闭合内部浮动，在标准浏览器下利用:after伪类插入clear:both的块级元素实现浮动清除。只需在需要清除浮动的元素上添加clearfix类即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

.clearfix的原理：

1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中添加clearfix类名就好了。

转载于:https://www.cnblogs.com/pao8041/p/5691492.html