细微之处:比较两种CSS清除浮动的兼容

http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html

清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮动的地方都要清除。

比如,我在瑞星的项目中一直这样使用:

.clear:after{content:'\0020';display:block;height:0;clear:both}
.clear{*zoom:1}

观察腾讯微博项目,并不是每个浮动必须清除,但是如果内部元素连续浮动,其外部元素必然定高以避免找不到高度的情况,其清除浮动的代码如下:

.clear:after{content:'.';clear:both;display:block;height:0;visibility:hidden;
line-height:0}
.clear{zoom:1}

腾讯微博的.clear和许多选择器并列在一起,如:

.clear,.LC,.topicList,.mediaWrap,.cellMod{zoom:1}

我和腾讯微博的技术总监聊过这里可以去掉.LC等其余的选择器,并在这些类上定义clear的类,这个问题肯定是遗留的,不过对性能没有影响。瑞星一个老资历的前端说是尽量减小html文件,这些大小可以作为代价转移到css文件上,不过我个人觉得css简洁一些,方法统一一些也是好事。

比较瑞星和腾讯的清除浮动的代码,有一些地方是不一样的,我在做瑞星的项目时,一开始采用的也是和腾讯一样的办法,在连续浮动元素后面追加'.',这样一来,页面中会出现大量的'.'字符,所以这种办法一定要定义visibility:hidden的属性。现在的瑞星项目采用的办法是在连续浮动元素后面追加空格(\0020),这样就不需要visibility和line-height属性,因空格在页面中是不可见的,而且html代码中的单个空格对页面显示并不会产生影响。在zoom:1的定义上,瑞星的定义只针对了会出问题的IE7和IE6浏览器,腾讯的代码针对所有浏览器,这里腾讯的代码可能在浏览器针对性上不如瑞星的代码。当然也有可能是为了更多浏览器的兼容,而我还没有研究到。

 

 

#1楼 2011-05-27 11:00 于安  
学习了: content
还有 .clear:after的写法, 这对应是怎么使用?
#2楼[楼主] 2011-05-27 11:06 BennyChia  
@于安
:after伪类受ie8以上支持,简单说就是在元素之后追加内容,需要和content属性一起使用,有点像jQuery里面的append()方法
#3楼 2011-05-27 12:03 Gray Zhang  
把.LC等全去掉,语义性会破坏得更加厉害,那这个class是不是干脆也别叫clear了,直接叫zoom-fix更好一点?
zoom这东西本来就是IE专有,且基本没有副作用,其他浏览器一概不认,所以加不加*其实无所谓,不需要担心未来的CSS会有zoom这属性,因为缩放已经被css3 transform实现了
#4楼 2011-05-27 13:09 code_flyer  
呵呵,这种技术很普遍的,来源于国外的clearfix 技术。
http://www.webtoolkit.info/css-clearfix.html
#5楼 2011-05-27 13:20 yonghu86  
值得推荐。
#6楼 2011-05-27 14:51 Jiyp  
:after伪类ie7也支持,请博主修正。另外问个问题:zoom:1 ,可以清理ie6的浮动么?我试了一下,怎么不好使呢
#7楼[楼主] 2011-05-27 15:03 BennyChia  
zoom:1不是用来清除浮动的,它是配合上面的:after来让ie6和7找到容器自身高度的
#8楼 2011-05-27 20:19 Gray Zhang  
@BENNY CHIA
IE6根本不认:after,zoom是为了触发hasLayout的,有了hasLayout的元素自动就有清浮动的特性
#9楼 2011-05-28 10:22 Jiyp  
@Gray Zhang
根据你的意思,那是不是可以理解为:在ie6下,让元素hasLayout,也就是变向的清楚浮动了?
#10楼 2011-05-28 11:26 Loveyuki  
一直用 .clear {clear:both; overflow:hidden; zoom:1; }
#11楼 2011-06-02 10:27 632611768  
学习了,哈哈..
#12楼 2011-06-02 10:56 Gray Zhang  
@Jiyp
IE下hasLayout的元素有很多特性,清浮动是其中之一,另外还有可设置width/height等其他效果
#13楼 2011-06-02 13:14 Lecaf  
我觉的overflow:hidden最好也加上,比较IE6的最小高度bug
#14楼 2012-12-24 15:43 semanwmj  
zoom:1有用吗?我怎么感觉加和不加一样啊
#15楼[楼主] 2012-12-24 16:03 BennyChia  
@semanwmj
在ie中zoom:1可以触发haslayout,IE中是有用的:)
#16楼 2012-12-24 16:34 semanwmj  
@BennyChia
可是触发和不触发也没看到有什么区别呀?
posted @ 2015-07-03 09:50  网络虫  阅读(741)  评论(0编辑  收藏  举报