html 万能清除,【荐】万能清除浮动样式

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

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

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

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

Update @ 2008.11.12

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

.clearfix:after {

content: "020";

display: block;

height: 0;

clear: both;

}

.clearfix {

zoom: 1;

}

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

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

html body div.clear,

html body span.clear

{

background: none;

border: 0;

clear: both;

display: block;

float: none;

font-size: 0;

margin: 0;

padding: 0;

overflow: hidden;

visibility: hidden;

width: 0;

height: 0;

}

这个样式可以通过在页面中添加

来清除页面中的浮动。

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

项目中常用如下代码：

.clear:after {

clear: both;

content: " ";

display: block;

height: 0;

overflow: hidden;

visibility: hidden;

}

使用方法如下：

xxx

yyy