这个是一个很流行的清除浮动的方法，在很多大项目上已经被完全采用。
这个方法来源于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]-->
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; }
这个样式可以通过在页面中添加<div class=”clear”></div> 或 <span class=”clear”> </span>来清除页面中的浮动。
这个页面正是著名的960 CSS 框架的作者的博客。而他却在960 CSS框架中同时使用了这两种方法。
分类:
css
本文转自快乐就好博客园博客，原文链接：http://www.cnblogs.com/happyday56/archive/2009/09/16/1568128.html，如需转载请自行联系原作者
