【薦】萬能清除浮動樣式

這個是一個很流行的清除浮動的方法，在很多大項目上已經被完全采用。

這個方法來源於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 */
	display: block;		/* resets display for IE/Win */
}
/* 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框架中同時使用了這兩種方法。

 

---

 

項目中常用如下代碼：

.clear:after {
	clear: both;
	content: " ";
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

使用方法如下：

<div class="clear">
	<div class="title">xxx<div>
	<div class="content">yyy</div>
</div>