關於清除浮動的五種方法

2021-08-28 06:10:06 字數 751 閱讀 1130

清除浮動的本質:為了解決父級元素印子級浮動引起內部高度為0的問題。

.clear

方式2:父級新增overflow屬性方法

.father
優點:**簡捷。

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

方法3:為父元素新增after偽元素清除浮動

.clearfix:after

.clearfix

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

缺點:由於ie6-7不支援:after,使用zoom:1觸發haslayout。

方法4:為父元素新增before和after雙偽元素清除浮動

.clearfix:before,.clearfix:after 

.clearfix:after

.clearfix

優點:**更簡潔

缺點:由於ie6-7不支援:after,使用zoom:1觸發haslayout。

方法5:為父元素設定具體的寬和高的值

.father

前端 清除浮動 五種方法

box1,box2,box3 box1 box2 box3 class box1 div class box2 div style clear both div class box3 div body 在最後乙個浮動元素後面增加 bigbox box1 box2 box3 class bigbox ...

清除浮動的五種方法詳解

前言 在非ie瀏覽器 如firefox 下,當容器的高度為auto,且容器的內容中有浮動 float為left或right 的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢位到容器外面而影響 甚至破壞 布局的現象,這個現象叫浮動溢位。為了防止這個現象的出現而進行的css處理,...

關於清除浮動的四種方法

浮動對頁面的影響 如果乙個父盒子中有乙個子盒子,並且父盒子沒有設定高,子盒子在父盒子中進行了浮動,那麼將來父盒子的高度為0.由於父盒子的高度為0,下面的元素會自動補位,所以這個時候要進行浮動的清除。關於清除浮動的方式 方式一 使用overflow屬性來清除浮動 ovh 先找到浮動盒子的父元素,再在父...