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

阅读更多

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

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

    
    
    
    


     
     
     
     .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浏览器，腾讯的代码针对所有浏览器，这里腾讯的代码可能 在浏览器针对性上不如瑞星的代码。当然也有可能是为了更多浏览器的兼容，而我还没有研究到。