關於清除浮動的四種方法

浮動對頁面的影響：

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

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

關於清除浮動的方式:

方式一:使用

overflow

屬性來清除浮動

.ovh

先找到浮動盒子的父元素，再在父元素中新增乙個屬性：overflow:hidden,就是清除這個父元素中的子元素浮動對頁面的影響

.注意：一般情況下也不會使用這種方式，因為overflow:hidden有乙個特點，離開了這個元素所在的區域以後會被隱藏（

overflow:hidden

會將超出的部分隱藏起來）

.方式二:使用額外標籤法

.clear

在浮動的盒子之下再放乙個標籤，在這個標籤中使用clear:both，來清除浮動對頁面的影響

.a.內部標籤：會將這個浮動盒子的父盒子高度重新撐開

.b.外部標籤：會將這個浮動盒子的影響清除，但是不會撐開父盒子

.注意：一般情況下不會使用這一種方式來清除浮動。因為這種清除浮動的方式會增加頁面的標籤，造成結構的混亂.

方法三:使用偽元素來清除浮動

(after意思:

後來,以後)

.clearfix:after

.clearfix

.clearfix:before,.clearfix:after 

.clearfix

,第二種方法會增加許多不必要的標籤

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

關於清除浮動的四種方法

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

關於清除浮動的四種方法

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

關於清除浮動的四種方法

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