CSS清除浮動2

2021-06-23 05:19:04 字數 796 閱讀 5283

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浮動

css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...

CSS清除浮動 清除float浮動

css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...

CSS清除浮動 清除float浮動

一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不能撐開,這樣浮動就產生了...