清除浮動的方法及原理

用下面**來體會

我是乙個即將要左浮動的盒子我是乙個文字盒子我是乙個底部盒子

效果圖是：

給floatdiv盒子加上浮動後：

很明顯浮動主要帶來了兩方面的影響：

一、對父盒子topdiv高度影響：子盒子浮動，會讓父盒子的高度塌陷，如果父盒子沒有內容，高度會變成0，所以叔父盒子bottomdiv因為浮動的影響位置改變

二、對兄弟盒子textdiv的影響：浮動會影響它下面的盒子，浮動盒子的兄弟盒子中是文字，因為浮動產生了文字環繞的效果，這可能是我們不希望出現的。

所以我們不是清除浮動，而是清除浮動帶來的各種影響。要想清除影響一，就需要將父盒子的高度撐起來，這樣就不會影響到父盒子下面的內容；要想清除影響二，需要清除兄弟盒子周圍的浮動。

下面介紹清除浮動影響的方法。

1、利用clear樣式

用法：浮動盒子的兄弟盒子中的樣式加上clear: both;

優點：**簡潔，使用簡單。可以同時清除對兄弟盒子和叔父盒子的影響。

缺點：只對浮動後面的兄弟盒子有效果

.textdiv

結果：

解釋：因為浮動對兄弟盒子textdiv造成了影響，所以通過clear: both就可以清除盒子textdiv兩邊的浮動。也因為清除了盒子textdiv兩邊的浮動，所以盒子textdiv還是在原來的位置，父盒子的高度也不會發生塌陷，也因此清除了對叔父盒子bottomdiv的影響。

我是乙個文字盒子我是乙個即將要左浮動的盒子我是乙個底部盒子 .textdiv

這樣是不起效果的，因為盒子textdiv的位置先確定了，於是浮動盒子floatdiv就緊接著盒子textdiv下方渲染在父元素的左側，還是上面提到的影響二，浮動只會影響它下面的盒子；但是因為floatdiv浮動，所以父盒子高度塌陷，影響了叔父盒子的位置。

2、額外標籤法

用法：浮動造成了幾個影響就加上幾個清除浮動的塊級元素可以同時解決影響一和二

優點：使用簡單

缺點：增加了無用標籤，結構混亂

我是乙個文字盒子我是乙個即將要左浮動的盒子我是乙個底部盒子 .clear

我是乙個即將要左浮動的盒子我是乙個文字盒子我是乙個底部盒子 .clear

解釋：

和第乙個例子裡.textdiv應用clear清除浮動，撐起父級元素高度的原理完全一樣。

3、利用偽元素

用法：是額外標籤法的公升級版，是給浮動的父盒子新增的

優點：沒有增加標籤，結構更簡單

缺點：需要照顧低版本瀏覽器

這種方法就可以將浮動的影響制止住，主要是解決上面提到的影響一。

我是乙個即將要左浮動的盒子我是乙個文字盒子我是乙個底部盒子 .clearfix::after

結果：

可以看到解決了影響一，但是影響二並沒有解決

4、觸發bfc清除浮動

用法：給浮動的父元素新增overflow屬性，觸發bfc達到清除浮動的影響

優點：**簡潔，使用簡單

缺點：只能清除對叔父盒子的影響，不能清除對兄弟盒子的影響

我是乙個即將要左浮動的盒子我是乙個文字盒子我是乙個底部盒子 .topdiv

結果：