浮動

浮動元素會脫離文檔流並向左/向右浮動，直到碰到父元素或者另外一個浮動元素

 

浮動最初設計的目的是用來實現文字環繞效果， 後來才用於橫向排版或者多列布局

 

float特性

1. 破壞性， float的元素會脫離文檔流， 破壞了父標籤的本來結構，使得父標籤出現了坍塌現象
2. 包裹性， div設置了float以後，其寬度會自動調整爲包裹住內容寬度，而不是撐滿整個父容器
3. 會使inline元素「塊」化
4. 清除空格，多個換行的img，在顯示的時候，中間時候有一個空格的（換行被瀏覽器解析爲空格）， 但在浮動後， 空格就會消失 （「清空格」這一特性的根本緣由是因爲float會致使節點脫離文檔流結構。它都不屬於文檔流結構了，那麼它身邊的什麼換行、空格就都和它不要緊的，它就儘可能的往一邊去靠攏，能靠多近就靠多近，這就是清空格的本質）
5. 浮動後，其餘元素會「環繞」在其周圍

 

去除浮動特性， 避免父元素「坍塌」

1. 浮動父元素
2. 爲父元素添加overflow: hidden;
3. clear:both，不是很經常使用，可是你們要知道。經過在全部浮動元素下方添加一個clear:both的元素，能夠消除float的破壞性, 底層原理是在被清除浮動的元素上邊或者下邊添加足夠的清除空間， （因爲第三個元素是浮動元素，脫離了文檔流，就算給第三個元素上下加了清除空間，也是沒有任何意義的）
4. clearfix， 利用僞元素實現第三種效果， 在div後面增長了一個clear:both的元素，跟第三種方法是一個道理