选一种更好的清除浮动方案

发表于   |   分类于 ，   |  

原文链接http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best

清除浮动的方式多种多样，以下每种方案在不同情况下，都有它出色的地方。

重提clearfix

在CSS Mojo中Thierry Koblentz单独写了一篇文章来重温clearfix，强烈建议摈弃display: table的写法，而改用display: block的写法，其优点是避免包含块之间的margin塌陷（collapse）。

最近的一种代码量更少的清除浮动方案是这样的：

1
2
3
4
5
.container:after {
    content: '';
    display: block;
    clear: both;
}

“忘掉上面的写法吧”，让我们看看在现代浏览器上怎么写

在CSS Mojo中Thierry Koblentz还指出，针对现代浏览器开发时，我们可以弃用zoom和:before等属性/值，简化写法：

1
2
3
4
5
.container:after {
    content: '';
    display: table;
    clear: both;
}

这种写法特意没有支持IE6/7……

提醒一句：如果你重新开始一个新项目，放心做吧，但是不要使用这种写法，虽然你没有支持旧版本的IE浏览器，但是可以避免margin塌陷。

代码更少的清除浮动

这是最近广为接受的一种方案Micro Clearfix by Nicolas Gallagher。

1
2
3
4
5
6
7
8
9
10
11
.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (触发 hasLayout) */
}

overflow属性

当定位元素不显示在容器外时，这种方案通常是首选。

http://www.quirksmode.org/css/clearing.html，这篇文章解释了这种写法的一个常见问题，也就是在容器上设置width: 100%。

1
2
3
4
5
.container {
    overflow: hidden;
    display: inline-block; /* 用来触发IE的hasLayout */
    display: block; /* 覆盖上一条属性，重新设置为block */
}

触发IE浏览器的hasLayout不止有display这一个属性，其他的属性也可以做相同的工作。

1
2
3
4
5
.container {
    overflow: hidden; /* 清除浮动 */
    zoom: 1;  /* 用来触发IE的hasLayout */
    display: block; /* 元素必须为块级元素，如果只应用于块级元素，这条可不写 */
}

overflow清除浮动的另一种方案是使用下划线hack，IE浏览器会识别带有下划线的属性，但是其他的浏览器不可以，下面是利用zoom属性触发IE hasLayout的写法：

1
2
3
4
5
.container {
    overflow: hidden;
    _overflow: visible; /* for IE */
    _zoom: 1; /* for IE */
}

尽管这样很有用，但理想方案是不使用hack。

:after 伪元素

这种旧的方案以使用杂乱的CSS为代价，但好处是它会允许定位元素超出容器的边界。

http://www.positioniseverything.net/easyclearing.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
    display: inline-block;
}
.container:after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
.container {
    display: block;
}

使用行内样式，clear属性

一种快捷但是很乱的写法

1
<br style="clear:both" /> <!-- So dirty! -->

因为很多因素，这种方案很不理想：

不符合代码复用的思想，让你的代码看起来很不专业。
以后有其他的清除浮动方案可使用时，你必须回头来整理这些杂乱的html。