來源：

https://www.bilibili.com/video/BV14J4114768?p=196

清除浮動(dòng)的本質(zhì)

• 清除浮動(dòng)的本質(zhì)就是清除浮動(dòng)的影響
• 如果父盒子本身有高度，則不需要清除浮動(dòng)
• 清除浮動(dòng)之后，父級(jí)就會(huì)根據(jù)浮動(dòng)的子盒子自動(dòng)檢測(cè)高度，父級(jí)有了高度，就不會(huì)影響下面的標(biāo)準(zhǔn)流了

清除浮動(dòng)策略

閉合浮動(dòng)，只讓浮動(dòng)在父盒子內(nèi)部影響，不影響父盒子外面的其他盒子

清除浮動(dòng)——額外標(biāo)簽法

隔墻法，是W3C推薦的做法
在最后一個(gè)浮動(dòng)元素末尾添加一個(gè)空的塊級(jí)標(biāo)簽，例如<div style="clear:both;"></div>
優(yōu)點(diǎn)：通俗易懂，書寫方便
缺點(diǎn)：添加許多無意義的標(biāo)簽，結(jié)構(gòu)比較差

清除浮動(dòng)——父級(jí)添加overflow

給浮動(dòng)元素父級(jí)添加overflow屬性，屬性值可以為hidden、auto或scroll任意之一。
優(yōu)點(diǎn)：代碼簡潔
缺點(diǎn)：無法顯示溢出部分

清除浮動(dòng)——:after偽元素

:after方式是額外標(biāo)簽的升級(jí)版，也是給父元素添加

.clearfix:after {
            content: "";//偽元素必須寫的屬性
            display: block;//插入的元素必須是塊級(jí)
            height: 0;//不要看見這個(gè)元素
            clear: both;//核心代碼清除浮動(dòng)
            visibility: hidden;//不要看見這個(gè)元素
        }
 .clearfix { /* IE6、7專有 */
            *zoom: 1;
        }

優(yōu)點(diǎn)：沒有增加標(biāo)簽，結(jié)構(gòu)更簡單
缺點(diǎn)：照顧低版本瀏覽器
代表網(wǎng)站：百度，淘寶網(wǎng)，網(wǎng)易等

清除浮動(dòng)——雙偽元素清除浮動(dòng)

.clearfix:before, .clearfix:after {
            content: "";
            display: table;//轉(zhuǎn)換為塊級(jí)元素并且一行顯示
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

優(yōu)點(diǎn)：代碼更簡潔
缺點(diǎn)：照顧低版本瀏覽器
代表網(wǎng)站：小米、騰訊等