清除浮动的方法
方法一:
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{ display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix{display:block;}
/* End hide from IE-mac */
说明:
1.对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
2.第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。利用 * / 对 IE/Mac 隐藏一些规则:
2.1.height:1% 用来触发 IE6 下的haslayout。
2.2.重新对 IE/Mac 外的IE应用 block 显示属性。
2.3.最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史(尤其是Mac下的IE5 ),或正在靠近标准的路上,这个方法就不再那么与时俱进了。
方法二:抛掉对 IE/Mac 的支持之后,新的清除浮动方法:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
说明:
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout,以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。
updata:2011.12.24 0:04
来自 支付宝前端 Alice
/* 清理浮动 */
.fn-clear:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.fn-clear {
zoom:1; /* for IE6 IE7 */
}