CSS之清除浮動

 對於我這類初學者來說,清除浮動是我們在寫css的時候經常遇到的問題

方案一在浮動元素外設置一個父元素,將父元素的height屬性設置爲浮動元素不溢出父元素的高度

這是我這次寫項目最常用的解決方案,不過倘若浮動元素有變或需要zishiy也要修改,不太提倡用於會變動的浮動元素裏

方案二:在浮動元素外設置一個父元素,將父元素的overflow屬性設置爲auto

《精彩絕倫的CSS》裏提到的一個方法,如果想保證避開IE6的小問題,那麼就應爲該父元素設置一個明確的width屬性(auto之外的值)

另外有一點要注意,overflow的auto值意味着瀏覽器可以在該父元素上添加滾動條,實際操作中不一定會出現

方案三:在浮動元素外設置一個父元素,將父元素也浮動起來,把float設爲left或right

《精彩絕倫的CSS》裏提到的另一個方法。這種方案之所以會起作用是因爲浮動本身就是被定義爲用來包裹任何浮動的後代元素,最好給該父元素明確定義一個width值(除了auto)。否則的話,讓瀏覽器自行決定父元素多寬多窄很危險,結果不可預知。不過還有一個問題是,父元素也浮動起來了。個人感覺該方法不太好用,不推薦

方案四在浮動元素外設置一個父元素,爲該父元素設置一個僞類,CSS屬性如下:

.clearfix:after {

content: ".";

visibility: hidden;

display: block;

height: 0;

clear: both; }

該方案在父元素後添加了一小部分內容但把它隱藏起來了,以達到清除浮動的效果。但是,該方案在IE6上實現相同效果還需要額外的代碼

(摘自http://css-tricks.com/all-about-floats/

方案五在浮動元素後添加一個div,<div style="clear: both;"></div>

有點類似換行的感覺同樣摘自http://css-tricks.com/all-about-floats/

總結一下,個人還是比較推薦方案二,或者將方案三及方案五結合起來(也就是說讓父元素浮動起來,同時在該父元素後添加上<div style="clear: both;"></div>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章