概述
本文的大體結構框架如下圖：
1.浮動到底是什麼？
W3school中給出的浮動定義爲<b>浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。</b>由於浮動框脫離文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
2.浮動有什麼特點？
浮動的特點，可以用八個字總結：脫標、貼邊、字圍和收縮。
爲了更好說明，請看下圖：
當框 1 向左浮動時，它脫離文檔流（脫標）並且向左移動（貼邊），直到它的左邊緣碰到包含框的左邊緣。因爲它不再處於文檔流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果框2中有文字，就會圍着框1排開（字圍）。
如果把所有三個框都向左浮動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
下面着重講解下第四個特點——收縮
一個浮動的內聯元素（比如span img標籤）不需要設置display：block就可以設置寬度。
<style>
div{
float: left;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>
這是一段文字
</div>
</body>
得到以下的效果：
我們都知道div標籤是塊級元素，會獨佔一行，然而上面的例子中將div設置爲左浮後，其寬度不再是佔滿一行，而是收緊爲內部元素的寬度，這就是浮動第四個特徵的含義。
3.浮動有什麼缺點？
先看下面這段代碼：
<style>
.parent{
border: solid 5px;
width:300px;
}
.child:nth-child(1){
height: 100px;
width: 100px;
background-color: yellow;
float: left;
}
.child:nth-child(2){
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.child:nth-child(3){
height: 100px;
width: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
我們想讓父容器包裹着三個浮動元素，然而事與願違，得到卻是這樣的結果：
這就是浮動帶來副作用----父容器高度塌陷，於是清理浮動就顯着至關重要。
4.如何清理浮動？----清除浮動不是不用浮動，清除浮動產生的父容器高度塌陷。
<b>套路1：給浮動元素的父元素添加高度</b>
如果一個元素要浮動，那麼它的父元素一定要有高度。高度的盒子，才能關住浮動。可以通過直接給父元素設置height，這種方法在實際中用的比較少；另外一種，父容器的高度可以通過內容撐開（比如img圖片），實際當中此方法用的比較多。所以只需將 .parent部分設置height：100px;就可以清除浮動。
<b>套路2：clear:both;</b>
在最後一個子元素新添加最後一個冗餘元素，然後將其設置clear:both,這樣就可以清除浮動。
但是我們可以在頁面中不添加這些沒有意義的冗餘元素，而實現清除浮動嗎？當然可以，<b>只需在父元素.parent部分設置如下代碼：</b>
.parent::after {
content:"";
display:block;
height:0;
line-height:0;
visibility:hidden;
clear:both;
}
.parent{
*zoom;1;/*兼容IE67*/
}
這是通用的清理浮動方案，推薦使用
<b>套路3：給父集元素使用overflow:hidden;</b>
這種方案讓父容器形成了BFC（塊級格式上下文），而BFC可以包含浮動，通常用來解決浮動父元素高度坍塌的問題。
<b>BFC的觸發方式</b>
我們可以給父元素添加以下屬性來觸發BFC：
✦ float 爲 left | right
✦ overflow 爲 hidden | auto | scorll
✦ display 爲 table-cell | table-caption | inline-block
✦ position 爲 absolute | fixed
這裏我們也可以給父元素設置overflow:auto，但是爲了兼容IE最好使用overflow:hidden。
<b>但這種辦法有個缺陷：如果有內容出了盒子，用這種方法就會把多的部分裁切掉，所以這時候不能使用。</b>
<b>BFC的主要特徵</b>
① BFC容器是一個隔離的容器，和其他元素互不干擾；所以我們可以用觸發兩個元素的BFC來解決垂直邊距摺疊問題。
②BFC不會重疊浮動元素
③BFC可以包含浮動,這可以清除浮動。
5.總結
1） 加高法
浮動的元素，只能被有高度的盒子關住。 也就是說，如果盒子內部有浮動，這個盒子有高，那麼妥妥的，浮動不會互相影響。但是，工作上，我們絕對不會給所有的盒子加高度，這是因爲麻煩，並且不能適應頁面的快速變化。
2） clear:both;
最簡單的清除浮動的方法，就是給盒子增加clear:both；表示自己的內部元素，不受其他盒子的影響
3） 僞元素清除浮動
這種方法值得推薦使用，可以解決IE6/7的兼容問題
4） 給父集元素使用overflow:hidden;
這種方法適用於容器內容沒超過父容器的範圍。