浮動到底是什么？

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

浮動有哪些特征？

浮動會脫離文檔

• 浮動不會影響普通元素的布局，同時也存在蓋住普通元素的風險。

  
  
  浮動會脫離文檔流

浮動可以內聯排列

• 浮動的元素可以設置寬高并且可以內聯排列，是介于inline和block之間的存在。如果每個元素的高度不一致，會出現“卡住”的情況。

  
  
  浮動可以內聯排列

浮動會導致父元素高度坍塌

.box-wrapper {
  border: 5px solid red;
}
.box-wrapper .box {
  float: left; 
  width: 100px; 
  height: 100px; 
  margin: 20px; 
  background-color: green;
}

<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

結果如下，浮動元素脫離了文檔流，并不占據文檔流的位置，自然父元素也就不能被撐開，所以沒了高度。

父元素高度坍塌

如何清除浮動？

清除浮動實際上是“消除浮動影響”；而不是“浮動”本身。

1.clear清除浮動（推薦使用）

clear屬性不允許被清除浮動的元素的左邊/右邊挨著浮動元素，底層原理是在被清除浮動的元素上邊或者下邊添加足夠的清除空間。

接著上面的例子，我們簡單修改一下HTML代碼，如下

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both;"></div>
</div>

clear清除浮動

不要在浮動元素上清除浮動
如果我們給第三個元素加上clear:both，結果會怎樣？

<div class="box-wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box" style="clear:both;"></div>
</div>

不要在浮動元素上清除浮動

給第三個元素加上clear:both之后，第三個元素的左右都沒有挨著浮動元素，但是為什么高度還是坍塌了呢？機智的你可能發現了，由于第三個元素是浮動元素，脫離了文檔流，就算給第三個元素上下加了清除空間，也是沒有任何意義的。

2.對父級設置適合CSS高度

對父級設置適合高度樣式清除浮動，這里對“.box-wrapper”設置一定高度即可，一般設置高度需要能確定內容高度才能設置。

3.父級div添加 overflow:hidden樣式

overflow:hidden屬性相當于是讓父級緊貼內容，這樣即可緊貼其對象內內容（包括使用float的div盒子），從而實現了清除浮動。

參考鏈接
http://www.lxweimin.com/p/cd4cde49f0d4
http://www.divcss5.com/jiqiao/j406.shtml