CSS中常用的清除浮動(閉合浮動)的方法

2021-07-09 11:47:24 字數 589 閱讀 1294

1.   使用空標籤清除浮動。

這種方法在大部分環境下可以使用,但是在有些情況下會出現相容問題

ie6瀏覽器當中,div即使是空的,也會存在預設行高。

解決辦法:設定其高度為0,並設定overflow:hidden。

它的主要弊端在於在頁面中增加了乙個無意義的元素

2.   使用overflow:hidden

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

3.   使用after偽物件清除浮動

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

閉合浮動(清除浮動)

什麼是css清除浮動?網路上流行的說法是 在非ie瀏覽器 如firefox 下,當容器的高度 height 為auto,且容器的內容中有浮動 float為left或right 的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到 容器外面而影響 甚至破壞 布局的現象。這個現象...

清除浮動 or 閉合浮動?

在網頁布局中我們會經常用到浮動,有了它我們可以更容易地實現我們想要的效果,但浮動過後往往會留下一些隱患。這時,我們通常會做一件事清除浮動,但清除浮動也會經常留下隱患,如下 效果圖如下 雖然foot中使用clear both清除浮動,但是main的高度無法自適應子元素的高度,導致塌陷 箭頭所指 下面介...

關於清除浮動與閉合浮動

在給html新增樣式的構成中,css是必不可少的的,然而css中有一些功能的實現可以通過不同的方法實現,通過效果檢視好像並沒有什麼不同,那它們之間到底有什麼本質區別呢,又有哪些概念被我們無意的忽略或者無視了呢,突然想總結總結這一類的問題,本篇隨筆算是本人對於 清除浮動 的歸納吧.在布局的時候我們經常...