清除浮動的幾種方式：塊級化上下文 、clear：both
一、塊級化上下文：
原理：
1.BFC 全稱是塊級排版上下文，用于對塊級元素排版，默認(rèn)情況下只有根元素（body)一個塊級上下文，但是如果一個塊級元素 設(shè)置了float:left，overflow:hidden或position:absolute樣式，就會為這個塊級元素生成一個獨立的塊圾上下文，就像在window全局作用域內(nèi)，聲明了一個function就會生成 一個獨立的作用域一樣，新開僻的BFC像是開僻了一個新的小宇宙，使這個塊圾元素內(nèi)部的排版完全獨立隔絕。2.獨立的塊級上下文可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，也就是說包含塊會把浮動元素的高度也計算在內(nèi)，所以不用清除浮動來撐起高度。
生成BFC的幾種方式：
- 浮動 (元素的 float不為 none）
- 絕對定位元素 (元素的 position為 absolute 或 fixed)
- 行內(nèi)塊 inline-blocks (元素的 display: inline-block)
- 表格單元格 (元素的 display: table-cell，HTML表格單元格默認(rèn)屬性)
- 標(biāo)題 (元素的 display: table-caption，HTML表格標(biāo)題默認(rèn)屬性)
- overflow的值不為 visible的元素
- 彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)
最常見的是使用overflow：hidden的方式使之生成BFC。但基本都不采用這種方式，因為會影響布局，會隱藏超出部分。
二、clear：both
1、添加冗余元素
<div class="a">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div style="clear:left;"></div> <!--冗余的子元素-->
</div>
原理：
當(dāng)添加了最后一個冗余元素（未設(shè)置clear:both
）時；父元素和此冗余元素的高度都為0，并且三個浮動的元素都浮在了它們的上方蓋住了它們（可以把它們看成PS中的圖層）?，F(xiàn)在，給這個冗余元素添加clear:both（clear屬性介紹），它便要躲開這三個浮動元素，因此，一直往下跑，直到?jīng)]有被浮動元素蓋住才停下來。而父元素看到這個子元素跑開了，自然想要包裹住它。
缺點：添加了冗余元素，也不推薦
2、偽元素：after
.fix::after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
推薦這種方式。
3、雙偽元素
使用雙偽元素清除浮動
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
偽元素改良版，簡便但不嚴(yán)謹(jǐn)。
