一、什麼是浮動？為什麼要閉合浮動？

       浮動是脫離文件的普通流存在的（可以看作是漂浮在普通流上），它可以左右浮動，直到它的外邊緣遇到包含框或者另一個浮動框為止（即浮動框不在文件普通流中，所以在佈局的時候文件中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素）。

       正式因為這種浮動的這種特性，所以本該屬於普通流中的元素浮動之後，，包含框的高度就可能會發生變化（包含框內部由於不存在其他普通流元素了，表現出的高度就為0），在實際應用中，這會嚴重影響到我們佈局，所以我們需要閉合浮動，使其包含框表現出正常的高度。

二、怎麼清除浮動？

1、在浮動元素末尾新增一個空div，例如 <div style=”clear:both”></div>；

1. <div>
2. <divstyle="float:left"></div>
3. <divstyle="float:left"></div>
4. <divstyle="clear:both;"></div>
5. </div>

2、父級div定義 overflow: hidden；

1. <divstyle="overflow:hidden;"
   >
2. <divstyle="float:left"></div>
3. <divstyle="float:left"></div>
4. </div>

3、對父級元素設定合適的高度；

注：要求能夠詳細計算出實際高度，否則容易佈局混亂，不推薦使用。

4、對父級元素設定浮動；

注：與父元素相鄰的元素的佈局會受到影響，如果全部浮動的話，太麻煩也不利於後期維護，不推薦使用。

5、對父級元素設定偽元素，即：after；

1. .fatherBox:after {  content: "."; display: block
   ; height: 0; clear: both; visibility: hidden;  }     

 注： 1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;

　　2) height:0 避免生成內容破壞原有佈局的高度。

　　3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點選和互動;