【推荐】万能清除浮动样式

这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。

这个方法来源于positioniseverything ，通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器。

01
<style type="text/css">

02
.clearfix:after {

03
    content: ".";

04
    display: block;

05
    height: 0;

06
    clear: both;

07
    visibility: hidden;

08
}

09
.clearfix {display: inline-block;}  /* for IE/Mac */

10
 
11
</style>

12
<!-- main stylesheet ends, CC with new stylesheet below... -->

13
 
14
<!--[if IE]>

15
<style type="text/css">

16
.clearfix {

17
    zoom: 1;            /* triggers hasLayout */

18
    display: block;     /* resets display for IE/Win */

19
}

20
/* Only IE can see inside the conditional comment

21
and read this CSS rule. Don't ever use a normal HTML

22
comment inside the CC or it will close prematurely. */

23
</style>

24
<![endif]-->

Update @ 2008.11.12

刚刚看到一篇日志说这个问题，受到了点启发：

1
.clearfix:after {

2
    content: "020";

3
    display: block;

4
    height: 0;

5
    clear: both;

6
}

7
.clearfix {

8
    zoom: 1;

9
}

这个是优化版的清除浮动的样式，很值得推荐。

另外，我见到了一个无敌的清除浮动的样式，这个是通过独立的代码来清除的。

01
html body div.clear,

02
html body span.clear

03
{

04
    background: none;

05
    border: 0;

06
    clear: both;

07
    display: block;

08
    float: none;

09
    font-size: 0;

10
    margin: 0;

11
    padding: 0;

12
    overflow: hidden;

13
    visibility: hidden;

14
    width: 0;

15
    height: 0;

16
}

这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。

这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。