清除浮動的最常用的四種方法,以及優缺點

2021-09-29 13:03:26 字數 601 閱讀 5500

bigsmall

額外標籤法

優點:通俗易懂,方便

缺點:新增無意義標籤,語義化差

.fahter
優點:**簡潔

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

.clearfix:after

.clearfix

bigsmall

優點:符合閉合浮動思想,結構語義化正確

缺點:ie6-7不支援偽元素:after,使用zoom:1觸發haslayout.

方法四:使用before和after雙偽元素清除浮動

.clearfix:after,.clearfix:before

.clearfix:after

.clearfix

bigsmall

優點:**更簡潔

缺點:用zoom:1觸發haslayout.

浮動的清除 四種方法

原文 前言 乙個父親不能被自己浮動的兒子,撐出高度。我們本以為這些li,會分為兩排,但是,第二組中的第1個li,去貼靠第一組中的最後乙個li了。第二個div中的li,去貼第乙個div中最後乙個li的邊了。原因就是因為div沒有高度,不能給自己浮動的孩子們,乙個容器。只要浮動在乙個有高度的盒子中,那麼...

清除浮動的四種方法

今天面試 被問了乙個常考的問題 如何清除浮動,本身這個技術沒總結過,加上嘴笨 回答的不怎麼樣,於是簡單的整理一下 1.為什麼清除浮動 總是要清除浮動,為什麼呢,使用浮動之後出現什麼預期之外的顯示效果要清除浮動,總結一下,我認為是為了解決浮動帶來的高度塌陷 2.高度塌陷 先給乙個父元素 只設定寬度,不...

清除浮動的四種方法

清除浮動主要是為了解決父元素因為子元素的浮動引起的內部高度為0的問題。清除浮動主要是將要清除浮動的元素轉化成乙個bfc塊級格式化上下文,相當於乙個盒子,以此來隔絕外部的影響。即bfc元素特性表現原則就是 內部子元素再怎麼翻江倒海,翻雲覆雨,都不會影響外部元素。因此避免了margin的穿透,清除浮動。...