细微之处：比较两种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的写法, 这对应是怎么使用?

支持(0)反对(0)

  回复引用

#2楼[楼主] 2011-05-27 11:06 BennyChia 

@于安
:after伪类受ie8以上支持，简单说就是在元素之后追加内容，需要和content属性一起使用，有点像jQuery里面的append()方法

支持(0)反对(0)

  回复引用

#3楼 2011-05-27 12:03 Gray Zhang 

把.LC等全去掉，语义性会破坏得更加厉害，那这个class是不是干脆也别叫clear了，直接叫zoom-fix更好一点？
zoom这东西本来就是IE专有，且基本没有副作用，其他浏览器一概不认，所以加不加*其实无所谓，不需要担心未来的CSS会有zoom这属性，因为缩放已经被css3 transform实现了

支持(0)反对(0)

  回复引用

#4楼 2011-05-27 13:09 code_flyer 

呵呵，这种技术很普遍的，来源于国外的clearfix 技术。
http://www.webtoolkit.info/css-clearfix.html

支持(0)反对(0)

  回复引用

#5楼 2011-05-27 13:20 yonghu86 

值得推荐。

支持(0)反对(0)

  回复引用

#6楼 2011-05-27 14:51 Jiyp 

:after伪类ie7也支持，请博主修正。另外问个问题：zoom:1 ，可以清理ie6的浮动么？我试了一下，怎么不好使呢

支持(0)反对(0)

  回复引用

#7楼[楼主] 2011-05-27 15:03 BennyChia 

zoom:1不是用来清除浮动的，它是配合上面的:after来让ie6和7找到容器自身高度的

支持(0)反对(0)

  回复引用

#8楼 2011-05-27 20:19 Gray Zhang 

@BENNY CHIA
IE6根本不认:after，zoom是为了触发hasLayout的，有了hasLayout的元素自动就有清浮动的特性

支持(0)反对(0)

  回复引用

#9楼 2011-05-28 10:22 Jiyp 

@Gray Zhang
根据你的意思，那是不是可以理解为：在ie6下，让元素hasLayout，也就是变向的清楚浮动了？

支持(0)反对(0)

  回复引用

#10楼 2011-05-28 11:26 Loveyuki 

一直用 .clear {clear:both; overflow:hidden; zoom:1; }

支持(0)反对(0)

  回复引用

#11楼 2011-06-02 10:27 632611768 

学习了，哈哈..

支持(0)反对(0)

  回复引用

#12楼 2011-06-02 10:56 Gray Zhang 

@Jiyp
IE下hasLayout的元素有很多特性，清浮动是其中之一，另外还有可设置width/height等其他效果

支持(0)反对(0)

  回复引用

#13楼 2011-06-02 13:14 Lecaf 

我觉的overflow:hidden最好也加上，比较IE6的最小高度bug

支持(0)反对(0)

  回复引用

#14楼 2012-12-24 15:43 semanwmj 

zoom：1有用吗？我怎么感觉加和不加一样啊

支持(0)反对(0)

  回复引用

#15楼[楼主] 2012-12-24 16:03 BennyChia 

@semanwmj
在ie中zoom:1可以触发haslayout，IE中是有用的:)

支持(0)反对(0)

  回复引用

#16楼 2012-12-24 16:34 semanwmj 

@BennyChia
可是触发和不触发也没看到有什么区别呀？

支持(0)反对(0)