网站代码CSS中的.clearfix是什么意思

作者:Fortukey 来源:本站
摘要:.clearfix是一种通用类,它的作用是 —— 清除之前的浮动关系,修复在firefox、chrome等标准浏览器中子元素全部浮动时,父元素不自动增高的问题。演示代码.clearfix:after{clear:both;content:".";display:block;height:0;font-size:0;visibility:hidden;}.clearfix{*zoom:1;}复制【针对clearfix的解释】对clearf

.clearfix是一种通用类,它的作用是 —— 清除之前的浮动关系,修复在firefox、chrome等标准浏览器中子元素全部浮动时,父元素不自动增高的问题。

演示代码

.clearfix:after{clear:both;content:".";display:block;height:0;font-size:0;visibility:hidden;}.clearfix{*zoom:1;}

复制

【针对clearfix的解释】
对clearfix本身没有添加任意内容。只是对.clearfix:after做出一些css属性定义。:after是对某个元素之后的定义。使用CSS伪类:before, :after在网页插入内容。
.content:"."; —— 内容为空
display:block; —— 块状显示+
height:0; —— 高度为0
clear:both;  —— 清除浮动
理解为:引用了clearfix的元素,其后添加一个块(内容为空,高度为0,并清除之前的浮动关系)。
【关于IE】
低版的IE不会支持:after,但同样低版本的IE会自动增高,所以不用写这一段。如果不放心,增加一个zoom:1属性也可以。


声明:本文由【Fortukey】编辑上传发布,转载此文章须经作者同意,并请附上出处【Fortukey】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

在线客服
嘿,我来帮您!