css - clearfix-清除浮动

参考：

http://www.cnblogs.com/zllwebjs/archive/2010/03/19/1689980.html

http://www.cnblogs.com/zhangyufeng523/archive/2011/05/09/2041224.html

 

清除浮动方法有好几种，

1. 用空div，设置css为clear:both

2. 用空br，设置css为clear:both

3. 用空br，用原生clear属性

以上三种都需要添加额外元素，对dom操作容易产生其他问题（之前做项目确实碰到过空div进行clear带来的烦恼）

 

再来看看先进的方法：

 

/*.clearfix{zoom:1}*/

/*.clearfix{*height:1%}*/

.clearfix:after{content:"."; clear:both; height: 0; display: block; visibility: hidden; line-height: 0;}

 

通过设置zoom或者height都可以触发IE的hasLayout属性，这样就可以解决浮动带来的问题。