清除浮動的幾種方式

2021-07-29 01:53:18 字數 460 閱讀 5007

1.可以給父級元素設乙個高度,如果高度是固定的,這種方法**簡單,但是要給父級元素設成乙個固定的高度。

2.可以在浮動的下面加乙個空的元素:clear both;

3.給父元素定義乙個偽類:after或:before clear:both,display:block;zoom:1/*為了相容ie zoom:1清除浮動,是

ie瀏覽器

的專有屬性,

firefox

等其它瀏覽器不支援。它可以設定或檢索物件的縮放比例。除此之外,它還有其他一些小作用,比如觸發ie的

haslayout

屬性,清除浮動、清除

margin

的重疊等。

但很遺憾的是,它通不過w3c驗證.*/

4.父級元素overflow:hidden或auto

;必須要定義width或zoom:1.

5.父級元素也一起浮動,但會引發新的問題。

清除浮動的幾種方式

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

清除浮動的幾種方式

不清除浮動會怎樣?1 背景不能顯示 2 邊框不能撐開 3 margin 設定值不能正確顯示 4 下方內容往上移蓋住浮動區域的內容 html div class container div class fl div div class fr div div style fl.fr style 方式一 ...