清除浮動(dòng)的目的
清除浮動(dòng)主要是為了解決父元素因?yàn)樽蛹?jí)元素浮動(dòng)引起的內(nèi)部高度為0的問(wèn)題（高度坍塌）

1、

2、

總結(jié)一下：

1. 一個(gè)父元素中的子元素浮動(dòng)了，那這個(gè)子元素就不再支撐父元素的高度

2. 如果一個(gè)父元素中所有的子元素都浮動(dòng)了，那父元素會(huì)高度坍塌

3. 破壞原有的文檔流布局，變?yōu)楦?dòng)布局，元素可以橫向排列

4. 浮動(dòng)會(huì)讓元素"塊狀化"【行內(nèi) 行內(nèi)塊 都會(huì)變成塊級(jí)】

5. 子元素浮動(dòng)后，外間距的重疊現(xiàn)象消失【兄弟間的上下重疊，父子間的上下邊重疊】

這時(shí)候很多人會(huì)想到新建標(biāo)簽clear：both和float 方法，但是這兩種方法并不推薦使用！
什么是clear：both
clear：both：本質(zhì)就是閉合浮動(dòng)， 就是讓父盒子閉合出口和入口，不讓子盒子出來(lái)

清除浮動(dòng)的方法（最常用的4種）
1.額外標(biāo)簽法（在最后一個(gè)浮動(dòng)標(biāo)簽后，新加一個(gè)標(biāo)簽，給其設(shè)置clear：both；）（不推薦）

此時(shí)，如果我們清除了浮動(dòng)，父元素自動(dòng)檢測(cè)子盒子最高的高度，然后與其同高。
優(yōu)點(diǎn)：通俗易懂，方便
缺點(diǎn)：添加無(wú)意義標(biāo)簽，語(yǔ)義化差
2.父級(jí)添加overflow屬性（父元素添加overflow:hidden/auto/scroll）（不推薦）
通過(guò)觸發(fā)BFC方式，實(shí)現(xiàn)清除浮動(dòng)

3.使用after偽元素清除浮動(dòng)（推薦使用）--百度網(wǎng)易

優(yōu)點(diǎn)：符合閉合浮動(dòng)思想，結(jié)構(gòu)語(yǔ)義化正確
缺點(diǎn)：ie6-7不支持偽元素：after，使用zoom:1觸發(fā)hasLayout.
推薦使用

4.使用before和after雙偽元素清除浮動(dòng)—小米/騰訊

優(yōu)點(diǎn)：代碼更簡(jiǎn)潔
缺點(diǎn)：用zoom:1觸發(fā)hasLayout.