利用虛擬元素:after清除浮動

標籤：style   blog   http   color   使用   ar   for   2014   div   

讓頁面呈現多欄版面配置時經常會使用  float:left/right ，可是浮動布局會導致父元素的高度為0（未設定高度的情況下），不會根據子項目的高度而變化，另外，後面不需要浮動想在下一行顯示的標籤出現在浮動元素的後面。

#content{background:#000;}.left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;}

所以我們在使用浮動進行布局的時候會需要一個區塊層級元素（行內元素無效）來設定 clear 屬性，如果浮動元素下方本來就有元素，那我們可以直接對該元素設定 clear:both ，若沒有其他元素需要展示，我們往往會寫一個空白標籤來清除浮動

<div style="clear:both"></div>

但是這樣無疑會增加瀏覽器的渲染負擔，所以考慮使用虛擬元素 :after 來代替這個空白標籤，因為清除浮動需要在浮動元素後面，所以不可以使用 :before ，對 :after 設定 content:"" ，並使其 display:block 成為區塊層級元素後 clear:both 來清除浮動：

#content:after{content:"";display:block;clear:both;}

該方法在 ie6、7 中無效，需要對 #content 設定 zoom:1。

利用虛擬元素:after清除浮動