給包圍 浮動的層 加清除浮動樣式，樣式要兼容的用下面的代碼
.clearfix {*zoom:1; clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;zoom: 1;}
一、簡單說說content內容生成
content內容生成就是通過content屬性生成內容，content屬性早在CSS2.1的時候就被引入了，可以使用:before以及:after偽元素生成內容。此特性目前已被大部分的瀏覽器支持： (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外，目前Opera 9.5+ 和 Safari 4已經支持所有元素的content屬性，而不僅僅是:before和:after偽元素。
例如下面這個簡單的例子：
h2:before {
content: "我是額外文字！";
}
此段樣式的作用是在每個h2標簽的前面添加文字“我是額外文字”。
您可以狠狠地點擊這里：content最基本使用Demo
content內容生成有非常多的特別的技術和應用，具體可以參見我之前寫的“CSS content內容生成技術以及應用”一文，但是，那里面介紹的些技術，雖然可以給我們帶來看到美女時類似的感覺，但是，目前而言，都是些沒有什么實用價值的技術。
但是，實際上，:after偽類+content內容生成卻是有着非常有用實用的作用的，本文就將展示這些實用的應用。
二、:after偽類+content 清除浮動的影響
這個技巧我想很多同行都用過，所以，這里僅簡單介紹下。
有點經驗的同行應該知道，一般不含包裹屬性的div內部有浮動元素的話，那么這個浮動元素會讓此div的高度塌陷。如下例子：
.box{padding:10px; background:gray;}
.l{float:left;}
<div class="box">
<img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
結果如下圖：
正如文章開始提到的，IE8+和其他所有現代瀏覽器都支持:after+content，所以，對於這些瀏覽器我們可以使用:after+content方法清除浮動造成的塌陷。使用如下：
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
這樣就可以讓IE8+和其他瀏覽器清除浮動破壞帶來的塌陷問題了。至於暫不支持:after偽類的IE6/IE7，我們可以使用IE私有的zoom縮放屬性讓div遠離浮動的破壞。故，雙劍合璧下就是：
.fix{*zoom:1;}
.fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
這樣子，就可以實現目前所有瀏覽器的清除浮動影響的方法了。
雖然，清除浮動影響方法很多，添加包裹屬性的元素，例如：position:absolute; display:inline-block; float:left; overflow:hidden等，但是，這些所有的方法都有局限性。我個人覺得:after偽類+zoom是目前最使用的清除浮動元素影響的方法。且不產生多余的標簽，所以，我一直用它。下圖為應用上面fix樣式后的效果，截自Firefox3.6瀏覽器：
您可以狠狠地點擊這里：:after偽類+content清除浮動影響demo
三、:after偽類+content 讓大小不固定圖片垂直居中
關於讓大小不固定的圖片垂直居中，我之前寫過篇研究性的文章“大小不固定的圖片、多行文字的水平垂直居中”，里面詳細展示了多種圖片水平垂直居中方法，各個方法的好壞你自己評判。
這里介紹的:after偽類+content實現的圖片垂直居中方法是我目前為止個人覺得最好，最使用的方法。ok，測試CSS代碼如下（綠色部分為功能相關CSS代碼）：
.pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}
.pic_box img{vertical-align:middle;}
.pic_box:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}
相應的HTML代碼如下：
<div class="pic_box">
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
結果IE7下的效果如下：
與清除浮動影響類似，IE6/7不支持:after偽類，我們可以用另外的方法讓圖片垂直居中，例如font-size方法，設一個比較大點的字體大小，IE6/7就可以實現圖片垂直對齊了，至於其他瀏覽器，就用:after偽類+content內容生成一個vertical-align:middle屬性的元素就可以了。這是我對“大小不固定的圖片、多行文字的水平垂直居中”一文中提到的最后的方法的又一次提升。
目前的測試結果是：所有瀏覽器都垂直居中，不過Chrome瀏覽器的水平居中貌似左邊偏移了點，這是因為Chrome瀏覽器font-size:0，不能消除空格產生的水平距離的原因。這或許是唯一點瑕疵吧。
您可以狠狠地點擊這里：:after偽類+content圖片垂直居中demo
四、結語
方法都是人想出來的。
例如讓大小不固定圖片垂直居中，我一開始是使用淘寶前端想出的的diaplay:table-cell + font-size方法，但是發現不支持浮動等缺點，開始想新方法；
后來發現兩個vertical-align:middle屬性的圖片靠在一起是會垂直對齊的，於是自己就將其中一張圖片寬度設成1像素，高度100%，且本身為透明圖片，於是實現了利用1像素寬度的輔助圖片實現圖片垂直居中對齊；
后來發現不一定是圖片，只要是inline-block屬性或是類似inline-block屬性的元素就可以了，於是后來就使用span或是i標簽等代替1像素寬的透明圖片，於是節約了一次圖片鏈接請求；
再后來，又發現寬度不一定是1像素，就是設成0，也是可以的，於是，就不用擔心輔助元素錯行的問題了；
再到現在，利用content內容生成技術，0寬度的實體標簽用:after偽類+content生成，這樣，就避免了在頁面上寫入輔助效果的空標簽，同時借助了淘寶前端多年之前發現的font-size居中方法。
文字來自:http://www.zhangxinxu.com/wordpress/2010/09/after%E4%BC%AA%E7%B1%BBcontent%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E5%B8%B8%E8%A7%81%E5%BA%94%E7%94%A8%E4%B8%BE%E4%BE%8B/