CSS中使用clearfix清除浮动的方法

　　首先在很多很多年以前我们常用的清除浮动是这样的。
 

1. .clear{clear:both;line-height:0;}  

　　现在可能还可以在很多老的站点上可以看到这样的代码，相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤，就是每次清除浮动的时候都需要增加一个空标签来使用。

　　这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签，增加了页面无用标签，不利于页面优化。但是我发现大型网站中 居然还在使用这种清楚浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样式名称。

　　因此有很多大神就研究出了 clearfix 清除浮动的方法，直接解决了上面的缺陷，不需要增加空标签，直接在有浮动的外层加上这个样式就可以了，这也是我们今天要讨论的clearfix进化史。

　　起源
 

1. .clearfix:after {    
2.     visibility: hidden;    
3.     display: block;    
4.     font-size: 0;    
5.     content: " ";    
6.     clear: both;    
7.     height: 0;    
8. }    
9. .clearfix { display: inline-table; }    
10.     
11. * html .clearfix { height: 1%; }//Hides <span style="width: auto; height: auto; float: none;" id="5_nwp"><a style="text-decoration: none;" mpid="5" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=3fdf214c8ec2a5ea&k=from&k0=from&kdi0=0&luki=1&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=eaa5c28e4c21df3f&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2Ehtml&urlid=0" id="5_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">from</span></a></span> IE-mac    
12. .clearfix { display: block; }//End hide from IE-mac  

　　解释一下以上的代码：

    对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
    第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。利用 * 对 IE/Mac 隐藏一些规则：
    height:1% 用来触发 IE6 下的haslayout。

    重新对 IE/Mac 外的IE应用 block 显示属性。

    最后一行用于结束针对 IE/Mac 的hack。（是不是觉得很坑爹，Mac下还有IE）

　　起源代码可能也是很早期的时候了，再往后Mac下的IE5也发展到IE6了，各种浏览器开始向W3C这条标准慢慢靠齐了。所以就有了下面这个写法出现了。
 

1. .clearfix:after {    
2.     visibility: hidden;    
3.     display: block;    
4.     font-size: 0;    
5.     content: " ";    
6.     clear: both;    
7.     height: 0;    
8. }    
9. * <span style="width: auto; height: auto; float: none;" id="4_nwp"><a style="text-decoration: none;" mpid="4" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=3fdf214c8ec2a5ea&k=html&k0=html&kdi0=0&luki=5&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=eaa5c28e4c21df3f&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F6259%2Ehtml&urlid=0" id="4_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">html</span></a></span> .clearfix { zoom: 1; } /* IE6 */  
10. *:first-child+html .clearfix { zoom: 1;