清除浮動的幾種方式

2022-07-26 14:54:12 字數 407 閱讀 6247

一、新增新的標籤

給最後乙個浮動元素新增新的標籤,設定乙個屬性為 clear:both 。(缺點:新增無意義標籤,結構較差)

二、通過給父級新增overflow屬性

新增 overflow:hidden。(缺點:內容增多的時候容易造成不會自動換行導致內容被隱藏掉,無法顯示要溢位的元素)

三、通過新增偽元素:before 或者:after 實現

頁面尾部清除浮動

.clearfix:after 

也可用以下**,清除其前後同時帶來的差異。 

.clearfix::before,

::after

清除浮動的幾種方式

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