CSS清除浮動常用方法小結

2021-07-11 08:13:30 字數 2371 閱讀 6913

本文**:

常用的清除浮動的方法有以下三種:

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

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

1、clear語法:clear : none | left|right| both 

2、clear引數值說明:

none :  允許兩邊都可以有浮動物件

both :  不允許有浮動物件

left :  不允許左邊有浮動物件

right :  不允許右邊有浮動物件

3、clear解釋:

該屬性的值指出了不允許有浮動物件的邊情況,又物件左邊不允許有浮動、右邊不允許有浮動、不允許有浮動物件。

4、css結構

divdiv

div

5、div clear常用地方

我們常常用於使用了float css樣式後產生浮動,最常用是使用clear:both清除浮動。比如乙個大物件內有2個小物件使用了css float樣式為了避免產生浮動,大物件背景或邊框不能正確顯示,這個時候我們就需要clear:both清除浮動。

如果內div是浮動的,一般都需要clear浮動,不然的話內div會超出外div的框架

案例

css:

.divcss5 

.divcss5_left,.divcss5_right

/* css注釋: 這裡為了截圖分別,對css**換行 */

.divcss5_left/* css注釋: 設定浮動靠左 */

.divcss5_right/* css注釋:設定浮動靠右 */ \

html:

float left盒子

float right盒子

案例效果截圖

這個時候需要clear來清除浮動,讓

「divcss5」盒子撐開。

我們在css**中加入css**:

.clear
html**中「.divcss5」盒子

結束標籤前加入**:

最終案例效果截圖

CSS清除浮動方法大全 小結

1 父級div定義偽類 after和zoom left right div2 原理 ie8以上和非ie瀏覽器才支援 after,原理和方法2有點類似,zoom ie轉有屬性 可解決ie6,ie7浮動問題 優點 瀏覽器支援好,不容易出現怪問題 目前 大型 都有使用,如 騰迅,網易,新浪等等 缺點 多,...

CSS清除浮動常用方法

css開發過程中清楚浮動是難以避免要使用的,今天犧牲午覺的時間整理一下吧!一 給父級加高度 這樣肯定不存在父級坍塌的問題了 問題 擴充套件性不好,如果要自適應高度就悲催了。二 讓父級浮動 父級和子級都浮動就不存在這個問題了 問題 頁面中所有元素都加浮動,margin左右自動失效 floats bad...

CSS之清除浮動的幾種常用方法小結

在浮動元素末尾新增乙個空的標籤例如 其他標籤br等亦可。class warp id float class main left maindiv class side left sidediv div div 優點 通俗易懂,容易掌握 缺點 可以想象通過此方法,會新增多少無意義的空標籤,有違結構與表現...