清楚浮動的幾種常用方法

慕課網學習總結

集同學的總結

浮動會讓元素塌陷。即被浮動元素的父元素不具有高度。脫離了普通的文檔流,不再佔用原來文檔中的位置,因此無法把父div撐開。例如一個父元素包含了浮動元素,它將塌陷具有零高度。你可以按以下哪種方法處理:

A。在浮動元素後價格div,設置clear:both ;  (爲了解決IE6中div有高度的問題 加這個   height:0; overflow:hidden;)

B.使用clearfix

C.設置父元素浮動

 
同學的總結:

/*------總結:常用的清除浮動的方法。
1、使用空標籤清除浮動。我用了很久的一種方法,空標籤可以是div標籤,也可以是P標籤。我習慣用<P>,夠簡短,也有很多人用<hr>,只是需要另外 爲其清除邊框,但理論上可以是任何標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後添加這樣一個標籤清除浮動,併爲其定義CSS代 碼:clear:both。此方法的弊端在於增加了無意義的結構元素。

對於使用額外標籤清除浮動(閉合浮動元素),是W3C推薦的 做法。至於使用<br />元素還是空<div></div>可以根據自己的喜好來選(當然你也可以使用其它塊級元素)。不過要注意的 是,<br />本身是有表現的,它會多出一個換行出來,所以要設定它的heigh爲0,以隱藏它的表現。所以大多數情況下使用空<div>比較合 適。

2、使用overflow屬性。此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意代碼的弊端。使用該方法是隻需在需要清除浮動的元素中定義CSS屬性:overflow:auto,即可!”zoom:1″用於兼容IE6,也可以用width:100%。

不過使用overflow的時候,可能會對頁面表現帶來影響,而且這種影響是不確定的,你最好是能在多個瀏覽器上測試你的頁面;

3、使用after僞對象清除浮動。 該方法只適用於非IE瀏覽器 。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須爲需要清除浮動元素的僞對象中設置height:0,否則該元素會比實際高出若干像 素;二、content屬性是必須的,但其值可以爲空,藍色理想討論該方法的時候content屬性的值設爲”.”,但我發現爲空亦是可以的。


------*/

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