常用的清除浮動的方法

2021-07-16 04:28:44 字數 1123 閱讀 1120

此為未清除浮動源**,執行**無法檢視到父級元素淺黃色背景。

left

right

三種清除浮動方法如下:

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

對於使用額外標籤清除浮動(閉合浮動元素),是w3c推薦的 做法。至於使用

元素還是空

可以根據自己的喜好來選(當然你也可以使用其它塊級元素)。不過要注意的 是,

本身是有表現的,它會多出乙個換行出來,所以要設定它的heigh為0,以隱藏它的表現。所以大多數情況下使用空比較合 適。

left

right

class=」clr」>

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

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

left

right

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

left

right

此三種方法各有利弊,使用時應擇優選擇,個人習慣於第一種,比較穩定可靠。

清除浮動的常用方法

先說不清除浮動的效果 給父元素這只邊框都不會把他們包裹起來,俗稱高度塌陷。然後說說幾個不常用的清除浮動方法,比如 style overflow hidden style float left div style float left div div 就是給父元素設定overflow屬性的那種,具體樣...

清除浮動的常用方法

1.給浮動元素父級設定高度 2.在最後乙個浮動標籤後,新加乙個標籤,將其樣式設定為 clear both 3.在父級元素新增樣式 overflow hidden 此方法會將多出的內容裁切掉,無法顯示要溢位的元素 4.使用before和after雙偽元素清除浮動,使用偽元素清除浮動必須是塊級元素上使用...

清除浮動的常用方法

方法一 對收到影響的元素進行設定,哪側受到浮動的影響就清除哪側,clear both clear left clear right 方法二 同時設定100 或固定寬度 overflow hidden 嘗試一下 如何使得p標籤內容跟div標籤的不同一行呢?doctype html html lang ...