浮動float最開始出現(xiàn)的意義是為了讓文字環(huán)繞圖片而已，后來用于讓三個塊級元素并排展示，這時候就出現(xiàn)了浮動

不過，由于float會導致浮動元素的父元素高度坍塌，所以，這時候就要去清除浮動

如果我們給上面的三個綠顏色的方塊設(shè)置display:inline-block也能達到讓它們并排顯示的效果。并且父元素的高度也不會塌陷。只不過無法控制是居左還是居右，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元素的高度算入其中，所以在計算裁切的同時，順帶達成了清除浮動的目的

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表格單元格默認屬性)
表格標題 (元素的 display: table-caption，HTML表格標題默認屬性)
overflow的值不為 visible的元素
彈性盒子 flex boxes (元素的 display: flex 或 inline-flex)