清除浮动的方法

最新推荐文章于 2025-09-10 11:07:46 发布

weixin_30824479

最新推荐文章于 2025-09-10 11:07:46 发布

阅读量79

点赞数

CC 4.0 BY-SA版权

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/upuphxl/archive/2011/12/23/2299998.html

本文介绍了两种CSS清除浮动的方法，一种适用于大多数现代浏览器，另一种则针对IE6/7做了特别处理。通过使用特定的选择器和属性，可以有效地解决因浮动元素引起的布局问题。

方法一：

.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 */
}