CSS清除浮動的三種方法,很實用

2022-07-26 06:42:11 字數 779 閱讀 3720

css清除浮動的方法有哪些呢?經常性地會使用到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

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

CSS清除浮動的三種方法

說說 float 的幾個要點就行了 只有左右浮動,沒有上下浮動。元素設定 float 之後,它會脫離普通流 和 position absolute 一樣 不再佔據原來那層的空間,還會覆蓋下一層的元素。浮動不會對該元素的上乙個兄弟元素有任何影響。浮動之後,該元素的下乙個兄弟元素會緊貼到該元素之前沒有設...

清除浮動的三種實用方法

概念 浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中,所以文件的普通流中的塊框表現得就像浮動框不存在一樣。大兄弟你該不會真的把概念讀完並且嘗試理解它?要是真的話,我只能說一句 你牛批 小白是不需要去理解概念的,只需要知道效果到底是啥樣的就o...

清除浮動的三種方法

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