清除浮動有幾種方式

2021-10-10 06:28:40 字數 456 閱讀 1645

1、父級 div 定義 height 原理:父級 div 手動定義 height,就解決了父級 div 無法自動獲取到高度的問題。 簡單、 **少、容易掌握 ,但只適合高度固定的布局.

2、結尾處加空 div 標籤 clear:both 原理:在浮動元素的後面新增乙個空 div 兄弟元素,利用 css 提高的 clear:both 清除浮動, 讓父級 div 能自動獲取到高度 ,如果頁面浮動布局多,就要增加很多空 div,讓人感覺很 不好 .

3、父級 div 定義 偽類:after 和 zoom /清除浮動**/ .clearfix:after 原理:ie8 以上和非 ie 瀏覽器才支援:after,原理和方法 2 有點類似,zoom(ie 專有屬性) 可解決 ie6,ie7 浮動問題 ,推薦使用,建議定義公共類,以減少 css **。

5. 雙偽元素法: .clearfix:before,.clearfix:after .clearfix

清除浮動的幾種方式

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 方法四 空標籤法 所有瀏覽器都適用 最後加入乙個...