常用代码

清除浮动新说
来源:深圳网软通科技有限公司 日期:2010-9-21 16:47:20

起源:

 

以下为引用的内容:

.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了。

上一篇 使用HTM... 下一篇 没有了


友情链接
深圳市网页设计深圳网站建设
版权所有 © 深圳市网软通科技有限公司 http://www.sznetsoft.com
直线:  +86-0755-83822397 +86-0755-33207200   总机:+86-0755-33207200    传真:+86-0755-81248352
地址: 深圳市福田区车公庙江西大厦(世纪豪庭)9D1-9D2 邮箱:salessznetsoft.com 粤ICP备06067962号
在线支持: