清除浮動常用的幾種方式

2021-08-18 02:34:23 字數 1623 閱讀 5517

1.父元素div定義高度

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

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

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

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

2.結尾處加空div標籤 clear:both(常用)

<

div style="clear

:both"

>

div

>

3.

父級div定義 偽類:after 和 zoom

.box

:after

//父元素加上zoom:1解決ie6,7浮動問題

.box

原理:ie8以上和非ie瀏覽器才支援:after,原理和方法2有點類似,zoom(ie轉有屬性)可解決ie6,ie7浮動問題 

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

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

4,5父級div定義: overflow:hidden(auto) ;(個人經常用)

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

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

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

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

6.父級div 也一起浮動

原理:所有**一起浮動,就變成了乙個整體 

優點:沒有優點 

缺點:會產生新的浮動問題。 

建議:不推薦使用,只作了解。 

7.父級div定義 display:table(不建議使用)

原理:將div屬性變成** 

優點:沒有優點 

缺點:會產生新的未知問題。 

建議:不推薦使用,只作了解。 

.box

8,結尾處加 br標籤 clear:both (經常用)

原理:父級div定義zoom:1來解決ie浮動問題,結尾處加 br標籤 clear:both 

建議:不推薦使用,只作了解。

<

br

style=

"

clear

:both

;"

>

清除浮動的幾種方式

1.可以給父級元素設乙個高度,如果高度是固定的,這種方法 簡單,但是要給父級元素設成乙個固定的高度。2.可以在浮動的下面加乙個空的元素 clear both 3.給父元素定義乙個偽類 after或 before clear both,display block zoom 1 為了相容ie zoom ...

清除浮動的幾種方式

元素1 元素2元素3 元素4元素5元素6 1.方法一 給父元素設定乙個高度 但是這種方法不經常使用 box1 box1 items box2 box2 items items2.使用clear both 這種方法相對於第一種方法較為簡潔,但是會造成第二個盒子元素的margin top屬性無效。這種方...

清除浮動的幾種方式

清除浮動的四種方法 方法一 弊端 此時父元素高度自適應,但是左右外邊距auto失效,父元素靠左對齊 father 方法二 高度自適應的關鍵。auto的話ie6會產生滾動條 father 方法三 法,但ie6不相容 有其他問題 father after 方法四 空標籤法 所有瀏覽器都適用 最後加入乙個...