对于一个前端设计者，经常用CSS设计页面，对于清除浮动似乎是一个再基础不过的技巧了，但是清除浮动也是有很多方法和代码的，今天分享一个流行且在很多大项目上已被采用的CSS清除浮动的代码。 这个代码来源于positioniseverything ，通过after伪类:after和IEhack来实现，完全兼容当前主流浏览器。
<style type="text/css">
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;} /* for IE/Mac */
</style>
<!-- main stylesheet ends, CC with new stylesheet below... -->
<!--[if IE]>
<style type="text/css">
.clearfix {
zoom: 1; /* triggers hasLayout */
<span style="color: #aa0000;">display: block; /* resets display for IE/Win */</span>
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
</style>
<![endif]-->上述代码是一种标准模式，效果和兼容性都是相当出色的，不过有些朋友总担心代码太多所造成的影响，可以这样优化一下，不影响清除效果，也是很不错的：
.clearfix:after {
content: "020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}