css去除浮動的三種方法

2021-03-03 20:27:28 字數 807 閱讀 8141

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

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

left

right

一、使用空標籤清除浮動

我用了很久的一種方法,空標籤可以是div標籤,也可以是p標籤。我習慣用,夠簡短,也有很多人用,只是需要另外為其清除邊框,但理論上可以是任何標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後新增這樣乙個標籤清楚浮動,並為其定義css**:

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

left

right

二、使用overflow屬性

此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意**的弊端。使用該方法是只需在需要清除浮動的元素中定義css屬性:overflow:

auto,即可!」zoom:1″用於相容ie6。

left

right

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

該方法只適用於非ie瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。

一、該方法中必須為需要清除浮動元素的偽物件中設定height:0,否則該元素會比實際高出若干畫素;

二、content屬性是必須的,但其值可以為空,藍色理想討論該方法的時候content屬性的值設為」.」,但我發現為空亦是可以的。

left

right

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

清除BLOCK元素浮動的三種方法

應用divcss網頁布局,經常性地會使用到float,很多邪門的事兒都有可能是浮動在作怪,清除浮動是必須要做的,而且隨時性地對父級元素清除浮動的做法也被認為是書寫css的良好習慣之一。下面看今天的教程,此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 一 使用空標籤清除浮動...

CSS清float浮動的幾種方法

可在浮動的父級加clearfix樣式。其原理是,在 高階 瀏覽器中使用 after 偽類在浮動塊後面加上乙個非 display none 的不可見塊狀內容來,並給它設定 clear both 來清理浮動。在 ie6 和 7 中給浮動塊新增 haslayout 來讓浮動塊撐高並正常影響文件流。這種方法...

辨析近義詞的三種方法

掌握大量的近義詞知識,才能把話說得更加準確嚴密,把意思表達得更加清楚 明白。常見的近義詞辨析可以從下面三方面作手。no.1詞義辨析 語意的輕重不同。有的近義詞內涵雖然相同,但在表現其某種特徵或程度上,則有輕重的差別。例如 努力竭力努力 竭力 又如 輕視和鄙視 喜歡和酷愛 著急和焦急 等都有語意輕重的...