CSS清除float浮動影響 實用三種方式

2021-10-08 00:05:05 字數 1461 閱讀 4594

結尾處加空div標籤 clear:both

原理:新增乙個空

div,利用

css提高的

clear:both

清除浮動,讓父級

div能自動獲取到高度。因為該屬性的作用是清除浮動對該元素的影響,也就是同級

div浮動之後導致浮動元素脫離文件流而使未浮動元素上移,在頁面中的顯示效果就為浮動元素將未浮動元素遮住,清除之後該未浮動元素就會放置於浮動元素的下方,也就是可以像文件流時的布局效果,但又因為此未浮動元素沒有寬高等屬性,所以父元素的高度就會基於此元素的上邊框計算,也就相當於文件流中的自適應高度。

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

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

div,讓人感覺很不好。

父級div定義 偽類:after 和 zoom

原理:元素生成偽類的作用和效果相當於方法

2中的原理,但是

ie8以上和非

ie瀏覽器才支援

:after

,zoom(ie

轉有屬性

)可解決

ie6,ie7

浮動問題

優點:

缺點:**多、不少初學者不理解原理,要兩句**結合使用才能讓主流瀏覽器都支援。

建議:推薦使用,建議定義公共類,以減少

css**。

父級div定義 overflow:hidden

原理:overflow:hidden

的意思是超出的部分要裁切隱藏掉,那麼如果

float

的元素不佔普通流位置,普通流的包含塊要根據內容高度裁切隱藏如果高度是預設值

auto

那麼不計算其內浮動元素高度就裁切就有可能會裁掉

float

。這是反布局常識的。所以如果沒有明確設定容器高度情況下它要計算內容全部高度才能確定在什麼位置

hidden

浮動的高度就要被計算進去順帶達成了清理浮動的目標

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

缺點:不能和

position

配合使用,因為超出的尺寸的會被隱藏。

建議:只推薦沒有使用

position

或對overflow:hidden

理解比較深的朋友使用。

CSS清除浮動 清除float浮動

css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...

CSS清除浮動 清除float浮動

css清除浮動方法集合 一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不...

CSS清除浮動 清除float浮動

一般浮動是什麼情況呢?一般是乙個盒子裡使用了css float浮動屬性,導致父級物件盒子不能被撐開,這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不能撐開,這樣浮動就產生了...