CSS中清除浮動的幾種方法

2022-06-05 10:26:11 字數 341 閱讀 5737

首先要明確我們為什麼要清除浮動?

當父級盒子不方便給高度,但子盒子浮動又不佔位置,父盒子的高度為0時。就會影響到後面的標準流盒子。

當父盒子沒有給高度的時候,裡面的子元素浮動會造成父盒子的高度塌陷(因為在盒子沒有給寬高的情況下,盒子的寬高由裡面的內容來撐開)。

而父盒子高度塌陷就會對我們後面的頁面布局造成影響。這個時候我們就需要清除浮動。

清除浮動的方法

二、父級元素新增overflow屬性

overflow:atuo; overflow:hidden; overflow:scroll; 三個中隨意乙個都行

css清除浮動的幾種方法

我一直以為產生浮動要我們給元素設定float,例如這裡提到的 今天我發現如果父盒子高度不定,子元素沒有設定浮動,如果父盒子高度變為0,那麼裡面的子元素會浮動,效果 黃色盒子上移了,很明顯child產生了浮動,效果等同於父盒子高度不定,子元素設定浮動,那麼父盒子高度會變成0,也就是高度坍塌。那麼如何解...

css清除浮動的幾種方法

當對某個標籤使用浮動的時候,該塊內容就會脫離文件流,其父元素便不再包裹該標籤內容,父元素的高度會變成0,出現高度塌陷的問題。這個時候就要清楚浮動。今天就來介紹一下css清除浮動的幾種方法。1.在文件最後麵新加乙個空的div,如下 style clear both div 但是如果使用這種方法,新增了...

css清除浮動的幾種方法

1,overflow hidden 在父元素上加上overflow hidden,當然這會有一些 比如內部的一些超出父元素的部分就會被截斷,滾動條也會不見。所以謹慎使用。2,clear both 在浮動的元素下方加乙個div 3,利用偽元素clearfix,這是比較常見和有效的方法,它的本質就是建構...