關於清除浮動的四種方法

2022-05-14 21:30:08 字數 580 閱讀 9147

浮動對頁面的影響:

如果乙個父盒子中有乙個子盒子,並且父盒子沒有設定高,子盒子在父盒子中進行了浮動,那麼將來父盒子的高度為0.由於父盒子的高度為0,

下面的元素會自動補位,所以這個時候要進行浮動的清除。

關於清除浮動的方式:

方式一:使用overflow屬性來清除浮動

.ovh

.clearfix

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

.clearfix:before,.clearfix:after

.clearfix

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

.clearfix:before,.clearfix:after {

content: "";

display: block;

clear: both;

.clearfix {

zoom: 1;

總結:第一種方法會將超出部分隱藏在某些時候我們想清除浮動並且保留超出部分時做不到,第二種方法會增加許多不必要的標籤,

所以我們盡量使用第三種方法來清除浮動,為什麼不選擇第四種方法呢?因為第四種是第三種的改良版雖然比較簡便,但是不

嚴謹!

關於清除浮動的四種方法

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

關於清除浮動的四種方法

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

關於清除浮動的四種方法

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