网络编程
位置:首页>> 网络编程>> 网页设计>> 清除浮动新说

清除浮动新说

作者:糖伴西红柿 来源:前端观察 发布时间:2009-12-25 18:49:00 

标签:浮动,清楚,伪类,css

起源

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.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下的IE5 ),或正在靠近
标准的路上,这个方法就不再那么与时俱进了。

抛掉对 IE/Mac 的支持之后,新的清除浮动方法:

/* new clearfix */
.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 */

说明

IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout,以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com