清除浮動的幾種方法

2021-08-10 01:31:58 字數 1131 閱讀 9150

(1)父級div定義 height

原理:父級div手動定義height,就解決了父級div無法自動獲取到高度的問題。

優點:簡單、**少、容易掌握

缺點:只適合高度固定的布局,要給出精確的高度,如果高度和父級div不一樣時,會產生問題

建議:不推薦使用,只建議高度固定的布局時使用

(2)、結尾處加空div標籤 clear:both

style="clear:both">

div>

原理:新增乙個空div,利用css提高的clear:both清除浮動,讓父級div能自動獲取到高度

優點:簡單、**少、瀏覽器支援好、不容易出現怪問題

缺點:不少初學者不理解原理;如果頁面浮動布局多,就要增加很多空div,讓人感覺很不好

建議:不推薦使用,但此方法是以前主要使用的一種清除浮動方法

(3)、父級div定義 偽類:after 和 zoom

.parent

:after

如果還要相容ie6和7的話,還要加上:

.parent

(4)、父級div定義 overflow:hidden

原理:必須定義width或zoom:1,同時不能定義height,使用overflow:hidden時,瀏覽器會自動檢查浮動區域的高度

優點:簡單、**少、瀏覽器支援好

缺點:不能和position配合使用,因為超出的尺寸的會被隱藏。

建議:只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。

(5)、父級div定義 overflow:auto

原理:必須定義width或zoom:1,同時不能定義height,使用overflow:auto時,瀏覽器會自動檢查浮動區域的高度

優點:簡單、**少、瀏覽器支援好

缺點:內部寬高超過父級div時,會出現滾動條。

建議:不推薦使用,如果你需要出現滾動條或者確保你的**不會出現滾動條就使用吧。

清除浮動的幾種方法

1.浮動元素下加空div 為了統一樣式,我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動,可以不用對父級設定高度 也無需技術父級高...

清除浮動的幾種方法

當元素浮動時,他將不再處於普通文件流中,相當於浮在文件之上,不佔據空間,但是會縮短行寬,產生文字環繞的效果。浮動帶來的影響 1,父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流,不佔位,而後面的元素未脫離文件流導致後面的元...

清除浮動的幾種方法

style float left 為了解決container容器高度塌陷問題,我們必須清除浮動 第一種方法 在container元素後加上乙個空的div標籤,然後給設定乙個clear both的樣式 第二種方法 給container容器新增 overflow auto hidden樣式 第三張方法 ...