关于CSS清理浮动的方法

最新推荐文章于 2025-05-13 15:09:04 发布

weixin_30402343

最新推荐文章于 2025-05-13 15:09:04 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cangmang/p/rrucelee.html

清理浮动有很多种方法，如果考虑到兼容性问题和语义化问题，一般可以使用如下代码来清理浮动：

.clearfix:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clearfix {
    zoom:1;
}
其原理是，在“高级”浏览器中使用:after伪类在浮动块后面加上一个非display:none的不可见块状内容并给它设置clear:both来清理浮动。在IE6和7中给浮动块添加haslayout来让浮动块撑高并正常影响文档流。
上面的代码是现在主流的清理浮动的方式。另外，Nicolas Gallagher又给出了一个更简洁的方案：
.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}
原理还是一样的。使用:after伪类来提供浮动块后的clear:both。不同的是，隐藏这个空白使用的是display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的hack。
值得注意的是这里的 :before 伪类。其实它是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context（BFC），这样浮动元素上的另一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。