浮動float最開始出現的意義是為了讓文字環繞圖片而已，后來用于讓三個塊級元素并排展示，這時候就出現了浮動
不過，由于float會導致浮動元素的父元素高度坍塌，所以，這時候就要去清除浮動
如果我們給上面的三個綠顏色的方塊設置display:inline-block也能達到讓它們并排顯示的效果。并且父元素的高度也不會塌陷。只不過無法控制是居左還是居右，display:inline-block只能從左往右。
清除浮動的方法：
(1) 在浮動元素最后增加一個冗余元素為其設置 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本意是將父元素中溢出的內容裁切掉，而BFC中，在計算父元素真實高度時候，也把float元素的高度算入其中，所以在計算裁切的同時，順帶達成了清除浮動的目的
BFC塊級格式化上下文有以下特征：
內部的Box會在垂直方向，從頂部開始一個接一個地放置。
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生疊加。
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float box疊加。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。
計算BFC的高度時，浮動元素也參與計算。
不單單只有給父元素添加overflow:hidden才可以創建塊級格式化上下文，下列方法都可以：
浮動 (元素的 float不為 none）
絕對定位元素 (元素的 position為 absolute 或 fixed)
行內塊 inline-blocks (元素的 display: inline-block)
表格單元格 (元素的 display: table-cell，HTML表格單元格默認屬性)
表格標題 (元素的 display: table-caption，HTML表格標題默認屬性)
overflow的值不為 visible的元素
彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)
