清楚浮動的方法

為什麼要清除浮動？

清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題

1. 如下，父盒子又border方便辨識，內部又有兩個盒子，未加浮動，預設撐開父盒子
   

2. ·現在是給兩個子盒子加上 folat：left ，左浮動
   
   可以明顯看到父盒子的邊框合在一塊，height：0 ；

總結得出：
父級元素不給高度，而且子元素未加浮動時會自動撐開父級元素。
父級元素不給高度，子元素新增浮動，父元素不會被撐開，從而height為0，border變成一條線

清楚浮動的方法

1. 父元素給予高度
   很多時候為了高度的自適應性, 我們用子元素去撐起父元素的高度，但是直接為元素新增高度會失去靈活性，可以用但是並不推薦
   

2. 新增額外標籤
   在最後一個浮動標籤後，新加一個標籤，給其設定clear：both；
   增加了不必要的標籤,語義化差，可以用，但同樣不推薦。
   

3. 父級新增overflow屬性
   通過觸發BFC方式，實現清除浮動
   內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢位的元素

  .bigBox {
        width: 500px;
        border: 1px solid red;
        overflow: hidden;
      }

4.使用after偽元素清除浮動
符合閉合浮動思想，結構語義化正確 推薦使用

<style>
.clearfix:after {
        /*偽元素是行內元素 正常瀏覽器清除浮動方法*/
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }
.clearfix {
        *zoom: 1; /*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/
      }
</style>
<div class="bigBox clearfix">
      <div class="box1"></div>
      <div class="box2"></div>
</div>