這個是一個很流行的清除浮動的方法，在很多大項目上已經被完全采用。
這個方法來源于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框架中同時使用了這兩種方法。

總結

以上是生活随笔為你收集整理的万能清除浮动样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。