浮動float最開始出現(xiàn)的意義是為了讓文字環(huán)繞圖片而已腕窥，后來用于讓三個塊級元素并排展示，這時候就出現(xiàn)了浮動
不過炫狱，由于float會導(dǎo)致浮動元素的父元素高度坍塌藻懒，所以，這時候就要去清除浮動
如果我們給上面的三個綠顏色的方塊設(shè)置display:inline-block也能達(dá)到讓它們并排顯示的效果视译。并且父元素的高度也不會塌陷嬉荆。只不過無法控制是居左還是居右，display:inline-block只能從左往右酷含。
清除浮動的方法：
(1) 在浮動元素最后增加一個冗余元素為其設(shè)置 clear:both
(2) 給父元素增加 clearfix
<div class="box clearfix">
<div class="div"></div>
</div>
.clearfix:after{
content: '';
display: table;
clear: both;
}
(3) 給父元素增加：
overflow:hidden;
zoom:1;
給父元素增加 overflow: hidden; 可以清除浮動的原理：
增加后鄙早，父元素會形成一個塊級格式化上下文，即BFC椅亚，overflow: hidden本意是將父元素中溢出的內(nèi)容裁切掉限番，而BFC中，在計算父元素真實高度時候呀舔，也把float元素的高度算入其中弥虐，所以在計算裁切的同時，順帶達(dá)成了清除浮動的目的
BFC塊級格式化上下文有以下特征：
內(nèi)部的Box會在垂直方向媚赖，從頂部開始一個接一個地放置霜瘪。
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加惧磺。
每個元素的margin box的左邊颖对， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)磨隘。即使存在浮動也是如此缤底。
BFC的區(qū)域不會與float box疊加顾患。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素个唧，反之亦然江解。
計算BFC的高度時，浮動元素也參與計算坑鱼。
不單單只有給父元素添加overflow:hidden才可以創(chuàng)建塊級格式化上下文膘流，下列方法都可以：
浮動 (元素的 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)
