3種常用CSS清除浮動的常用方法

2021-03-03 20:27:28 字數 705 閱讀 5744

css的浮動為我們的布局帶來了很大的好處,利用浮動我們可以很方便的寫出各種版式。但浮動同時也帶來很多問題;這些問題基本上都因為沒有及時的或者在適當的位置清楚浮動。下面來說下常用的清除浮動方法:

一:用空標籤

這是最常見的一種方法了。通過乙個內容為空的標籤來清除浮動。這個標籤可以是div、p、hr…。

理論上可以是任何標籤。這種方式是在需要清除浮動的父級元素內部的所有浮動元素後新增這樣乙個標籤清楚浮動,並為其定義css**:clear:

both。這種方法的弊端在於增加了無意義的結構元素。

left

right

二:使用overflow屬性

這種方法有效地解決了通過新增空標籤元素清除浮動而不得不增加無意**的弊端。使用該方法是只需在需要清除浮動的元素中定義css屬性:」overflow:

auto」,即可!為了相容ie6同時要加上」zoom:1″。

left

right

三:使用after偽物件清楚浮動。

該方法只適用於非ie瀏覽器。具體寫法可參照以下示例。

使用中需注意以下幾點:

1 該方法中必須為需要清除浮動元素的偽物件中設定height:0,否則該元素會比實際高出若干畫素;

2 content屬性是必須的,但其值可以為空,藍色理想討論該方法的時候content屬性的值設為」.」,但我發現為空亦是可以的

left

right

CSS清除浮動常用方法小結

2 使用overflow屬性。此方法有效地解決了通過空標籤元素清除浮動而不得不增加無意 的弊端。使用該方法是只需在需要清除浮動的元素中定義css屬性 overflow auto,即可!overflow auto 是讓高度自適應,zoom 1 是為了相容ie6,也可以用height 1 的方式來解決,...

css清除浮動的三方法

三種實用css清除浮動的方法 應用divcss網頁布局,經常性地會使用到float,很多邪門的事兒都有可能是浮動在作怪,清除浮動是必須要做的,而且隨時性地對父級元素清除浮動的做法也被認為是書寫css的良好習慣之一。下面看今天的教程,此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left ri...

css去除浮動的三種方法

應用divcss網頁布局,經常性地會使用到float,很多邪門的事兒都有可能是浮動在作怪,清除浮動是必須要做的,而且隨時性地對父級元素清除浮動的做法也被認為是書寫css的良好習慣之一。下面看今天的教程,此為未清除浮動源 執行 無法檢視到父級元素淺黃色背景。left right 一 使用空標籤清除浮動...