CSS清除浮動的三種方法

2022-09-02 05:24:09 字數 1544 閱讀 4486

說說 float 的幾個要點就行了:

只有左右浮動,沒有上下浮動。

元素設定 float 之後,它會脫離普通流(和 position: absolute; 一樣),不再佔據原來那層的空間,還會覆蓋下一層的元素。

浮動不會對該元素的上乙個兄弟元素有任何影響。

浮動之後,該元素的下乙個兄弟元素會緊貼到該元素之前沒有設定 float 的元素之後(很好理解,因為該元素脫離普通流了,或者說不在這一層了,所以它的下乙個元素當然要補上它的位置)。

如果該元素的下乙個兄弟元素中有內聯元素(通常是文字),則會圍繞該元素顯示,形成類似「文字圍繞」的效果。(可參考css float浮動的深入研究、詳解及拓展(一)

中的講解)

下乙個兄弟元素如果也設定了同一方向的 float,則會緊隨該元素之後顯示。

該元素將變為塊級元素,相當於給該元素設定了 display: block;(和position: absolute; 一樣)。

css清除浮動的方法有哪些呢?經常性地會使用到float,很多邪門的事兒都有可能是浮動在作怪,清除浮動是必須要做的,而且隨時性地對父級元素清除浮動的做法也被認為是書寫css的良好習慣之一。

下面看今天的教程,此為未清除浮動源**,執行**無法檢視到父級元素淺黃色背景。

156

left

7right

8

一、使用空標籤清除浮動

我用了很久的一種方法,空標籤可以是div標籤,也可以是p標籤。我習慣用,夠簡短,也有很多人用,只是

需要另外為其清除邊框,但理論上可以是任何標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後新增這樣乙個標籤清楚浮動,並為其定義css代

碼:clear:both。此方法的弊端在於增加了無意義的結構元素。

178

left

9right

1011

二、使用overflow屬性

此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意**的弊端。使用該方法是只需在需要清除浮動的元素中定義css屬性:overflow:auto,即可!」zoom:1″用於相容ie6。

1

5left

6right

<

7/div>

三、使用after偽物件清楚浮動

該方法只適用於非ie瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須為需要清除浮動元素的偽物件中設定height:0,

否則該元素會比實際高出若干畫素;二、content屬性是必須的,但其值可以為空,藍色理想討論該方法的時候content屬性的值設為」.」,但我發

現為空亦是可以的。

156

left

7right

8

此三種方法各有利弊,使用時應擇優選擇,比較之下第二種方法更為可取。

清除浮動的三種方法

lang en charset utf 8 清除浮動的三種方法title type text css div3 div3 after style head style background blue border 1px solid gold 使用空標籤清除浮動。增加了無意義的結構元素 style ...

清除浮動的三種方法

在我使用浮動時,為我們帶來了便利的同時也帶了一點影響,我們在使用浮動時往往不會給父級盒子新增高度,因為子盒子會撐起父盒子。這樣一旦我們使用浮動,則下面使用的div會跑到父級盒子的位置,畢竟使用浮動,不占有位置,解決此問題我列出了三種方法,希望能幫助大家。1 在浮動元素後新增空標籤 eg 111222...

清除浮動的三種方法

浮動布局,float left 會使當前元素脫離文件流,從而失去對父級元素的支撐,如果此時父級元素沒有設定高度,下面的元素就會擠上去,因此需要清除浮動 給浮動元素的父級元素設定overflow hidden 在浮動元素的同級下新增乙個空標籤,並且設定clear both 浮動元素的父級元素使用 af...