浮動的工作原理
浮動是讓某元素脫離文檔流，在浮動框之前和之後的非定位元素會當它不存在一樣，可能沿着它的另一側垂直流動，但都爲其騰出空間，塊級元素也不例外（被浮動元素佔據了部分行空間的塊級元素，仍然被看作是佔據了一整行，只不過是被浮動元素佔據的那部分空間無法利用罷了）。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止；如果當前線上的水平空間不足，它將逐行向下移動，直到有空間爲止（所以浮動元素不會影響頁面上方佈局）。任何元素都可以浮動，浮動元素會生成一個塊級框（擁有塊級元素特性，但不佔整行），而不論它本身是何種元素。
另外因爲浮動元素脫離了文檔流，所有它無法爲其文檔流中的父級元素撐起高度。
清除浮動技巧
1、clear清除浮動
left 在左側不允許浮動元素。
right在右側不允許浮動元素。
both在左右兩側均不允許浮動元素。
none默認值。允許浮動元素出現在兩側。
在 CSS1 和 CSS2 中，這是通過自動爲清除元素（即設置了 clear 屬性的元素）增加上外邊距實現的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身並不改變。不論哪一種改變，最終結果都一樣。例如：如果聲明爲左邊清除，會使元素的上外邊框邊界剛好在左邊浮動元素的下外邊距邊界之下。
要注意了，我們是通過在別的元素上清除浮動來實現撐開高度的， 而不是在浮動元素上。浮動元素脫離了文檔流，就算爲其加了清除空間，也影響不了父元素的高度，最多能讓其某側不允許其他浮動元素。
clear 只能作用與塊級元素或浮動元素，不過上面已經說了作用於浮動元素的弊端，所以一般都是使用塊級元素。
全瀏覽器通用的clearfix方案，使用僞元素清除浮動【推薦】
// 引入了zoom以支持IE6/7
// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.clearfix{
*zoom: 1;
}
另外：也可以在父級元素中增加一個專門清除浮動的塊級元素。（不推薦）
2、BFC清除浮動
BFC全稱是塊狀格式化上下文，它是按照塊級盒子佈局的。我們瞭解他的特徵、觸發方式、常見使用場景這些就夠了。
BFC的主要特徵
BFC容器是一個隔離的容器，和其他元素互不干擾；所以我們可以用觸發兩個元素的BFC來解決垂直邊距摺疊問題。
BFC可以包含浮動；通常用來解決浮動父元素高度坍塌的問題。
其中，BFC清除浮動就是用的“包含浮動”這條特性。
那麼，怎樣才能觸發BFC呢？
BFC的觸發方式
我們可以給父元素添加以下屬性來觸發BFC：
float 爲 left | right
overflow 爲 hidden | auto | scorll
display 爲 table-cell | table-caption | inline-block | flex | inline-flex
position 爲 absolute | fixed
參考文獻：http://www.jianshu.com/p/09bd5873bed4
https://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#propdef-float
PS:如果對你有幫助，就順手點個贊吧~