這個是一個很流行的清除浮動的方法，在很多大項(xiàng)目上已經(jīng)被完全采用。
這個方法來源于
positioniseverything ，通過after偽類:after和IEhack來實(shí)現(xiàn)，完全兼容當(dāng)前主流瀏覽器。
<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
剛剛看到
一篇日志說這個問題，受到了點(diǎn)啟發(fā)：
.clearfix:after { content: "020"; display: block; height: 0; clear: both; } .clearfix { zoom: 1; }
這個是優(yōu)化版的清除浮動的樣式，很值得推薦。
另外，我見到了一個
無敵的清除浮動的樣式，這個是通過獨(dú)立的代碼來清除的。
Text
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框架中同時使用了這兩種方法。
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點(diǎn)擊舉報(bào)。
