總結 清除浮動的四種常見方法

2022-09-02 10:12:10 字數 1267 閱讀 7268

1、使用空標籤清除浮動。 我用了很久的一種方法,空標籤可以是div標籤,也可以是p標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後新增這樣乙個標籤清除浮動,並為其定義css**:clear:both。此方法的弊端在於增加了無意義的結構元素。

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

元素還是空

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

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

eg:  

left

right

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

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

eg:

<

left

right

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

eg:

<

left

right

4、浮動外部元素,float-in-float。這種方法很簡單,就是把「#outer」元素也進行浮動(向左或者向右)。

但是這種方法帶來的別外乙個問題就是和「#outer」相鄰的下乙個元素會受到「#outer」的影響位置會產生變化,所以使用這種方法一定要小心。有選擇把頁面中的所有元素都浮動起來,最後使用乙個適當的有意義的元素(比如頁尾)進行清理浮動,這有助於減少不必要的標記,但是過多的浮動會增加布局的難度。

eg:

<

left

right

浮動以及清除浮動的常見方法

css的布局有三種機制 一是標準流,即普通流,所有的元素都屬於標準流 二是定位流,三則是定位流 浮動流組最開始是用來實現 混排的效果,因為浮動元素壓不住文字。我們如果只使用標準流來布局,很多效果是無法實現或者說實現起來比較麻煩,比如我們想多個元素拍成一行,又希望這一行的元素之間沒有間隙且可以設定寬高...

CSS四種清除浮動的方法

浮動能讓元素脫標,但是不同區域的標籤之間卻又會貼邊,比如 設計模式li ul div 學習方法li 英語水平li 面試技巧li ul div body html 顯示效果 本來應該是兩行現在卻顯示成了一行 貼邊 這裡有四種方法解決 1.給浮動的元素的父標籤元素加高度。有高度的盒子,才能關住浮動 注意...

浮動的清除 四種方法

原文 前言 乙個父親不能被自己浮動的兒子,撐出高度。我們本以為這些li,會分為兩排,但是,第二組中的第1個li,去貼靠第一組中的最後乙個li了。第二個div中的li,去貼第乙個div中最後乙個li的邊了。原因就是因為div沒有高度,不能給自己浮動的孩子們,乙個容器。只要浮動在乙個有高度的盒子中,那麼...