解決div設置浮動，高度消失

給包圍 浮動的層 加清除浮動樣式，樣式要兼容的用下面的代碼
.clearfix {*zoom:1; clear:both;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;zoom: 1;}

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內容生成倒是有着很是有用實用的做用的，本文就將展現這些實用的應用。

2、: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

3、: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

4、結語

方法都是人想出來的。
例如讓大小不固定圖片垂直居中，我一開始是使用淘寶前端想出的的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/