如何清除网站DIV浮动效果
网站建设过程中,DIV的清除浮动是不能省略的,或者说是必不可少的,各种浏览器在这个清除浮动问题上又不太相同,怀柔网站建设公司巨优网络认为:不能过多的写多余的代码让浏览器头大,所以在尽量少的代码前提下如何把网站浮动清除是非常重要的。下面怀柔网站建设巨优网络,就介绍一种清除浮动的方法,可以说是非常的实用。

01 |
<style> |
02 |
.clearfix:after{ |
03 |
visibility : hidden ; |
04 |
display : block ; |
05 |
font-size : 0 ; |
06 |
content : "." ; |
07 |
clear : both ; |
08 |
height : 0 ; |
09 |
} |
10 |
11 |
* html .clearfix{zoom: 1 ;} |
12 |
13 |
*:first-child + html .clearfix{zoom: 1 ;} |
14 |
15 |
</style> |
16 |
17 |
<DIV class= "clearfix" style= "border: 2px solid red;" > |
18 |
<DIV style= "float: left; width: 80px; height: 80px; border: 1px solid blue;" > |
19 |
怀柔巨优网络网站建设公司 |
20 |
</DIV> |
21 |
</DIV> |
下面怀柔网站建设巨优网络分析一下这些代码都是起什么作用的。
首先是利用:after伪类来兼容支持这一标准的浏览器们,FF、Chrome自然属于强烈支持标准的浏览器行列,不过IE自从繁殖到第八代开始,也表示支持这一伪类。:after伪类用来和content属性一起使用设置在对象后的内容。after伪类IE不支持,它用来和content属性一起使用设置在对象后的内容,例如:
1 |
.clearfix:after { content : "." ;} |
这个CSS将会让clearfix类标签内的文本后边加上英文句号。
"* html"这个选择符只有IE6才能识别,因此在其中设置缩放属性"zoom: 1;",便可实现兼容IE6;"*:first-child + html"这个选择符只有IE7才能识别,因此设置缩放属性"zoom: 1;" 便可实现兼容IE7。
清除浮动是一种很多年就重复的话题,也出现了很多种的解析方案,怀柔网站建设公司巨优网络认为这种解决方案是可行的。
巨优网络网站建设为怀柔区企业提供网站建设服务,提供怀柔网站建设、怀柔网站制作、怀柔网站优化服务,为怀柔区各单位提供完善的网站建设解决方案,推动怀柔信息化发展!怀柔做网站,怀柔做网站公司,选巨优网络!咨询热线:010-69632027