css 中以 clearfix 清除浮动的实现

2016.04.15

很久以前的清除浮动方法…

1
2
3
4
.clear{
clear:both;
line-height;
}

在同级元素之间插入.clear 的 div 元素,清除浮动。
然而这种清除浮动的方法需要引入额外的空 HTML 标签,不利于文档结构的组织。

一种简单的方案:

1
2
3
.clear{
overflow:hidden;
}

在一个用浮动元素外用一个 class 含有.clearfix 的 div 包住浮动元素,可以撑开外层的 div 元素从而产生清除浮动的效果。
这种方法的问题是有时候多级菜单会被隐藏,所以多数时候不是稳妥的方案。

更优的选择:

1
2
3
4
5
6
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
}

IE6 和 IE7 不支持伪类。
如果还需兼容 IE6 和 IE7,为了触发其元素的 haslayout,就加入:

1
2
3
.clearfix{
*zoom:1
}