為什麼要清除浮動？

浮動脫離了正常的文件流，會導致各種佈局問題，比如最常見的父元素塌陷，同級別兄弟元素定位異常等。

浮動有如下特徵：

1. 脫離標準文件流

2. 緊貼父元素邊緣

3. 若浮向最左側，會覆蓋最左側元素，但原來元素的文字會圍繞浮動元素

4. 設定浮動後，塊級元素會收為內部元素的寬度

導致父元素塌陷程式碼如下所示：

.parent{
            border: solid 5px;
       } 
.child{
            float: left;
            height: 100px;
            width: 100px;
            background-color
 
: yellow;
        }
 <div class="parent clearfix">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
  </div>

給父元素設定高度

相當於用固定高度撐起父元素。不推薦，可擴充套件性弱，可維護性差。

clear屬性

優點：簡單，相容性好。

有四種情況：

1. 父元素最後一個元素浮動

   給父元素的最後新增一個空的塊級元素，設定樣式clear：both

   。

   缺點：新增冗餘元素，可維護性不好。

    <div class="parent clearfix">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="clear"></div>
      </div>

    .clear{
      clear: "both";
    }

2. 父元素非最後一個元素浮動

   給浮動元素的鄰接元素設定clear：both

    <div class="parent clearfix">
            <div class="child"></div>
            <div class="child"></div>
            <div class="child"></div>
            <div class="content">xxx</div>//這裡是有內容的
     </div>

   .content{
      clear: 'both';
    }

3. 使用偽元素（推薦，使用較多）

   相容好，不產生新標籤，不會帶來其他問題。唯一的缺點是程式碼比較多。

   /*給父元素新增clearfix類*/
   .clearfix::after{
       content: '';
       display: block;
       clear: both;
       height: 0;
       line-height: 0;
       visibility: hidden;
    } 
   .clearfix{
       *zoom: 1;
       /*IE低版本相容*/
   }

   還可以使用雙偽元素：

    .clearfix:after,.clearfix:before{
        content: "";
        display: block;
    }
    .clearfix:after{
       clear: both;
    }
    .clearfix{
       *zoom: 1;
    }

   這裡我有點疑問，不知道為什麼單偽元素就能解決為什麼要用雙偽元素，我看到網上的雙偽元素方法中，以上程式碼的display用的table，但我試了一下結果是一樣的。留個疑問，以後查到更新。

4. 使用br，它有clear這個屬性，設定值為‘all’，放在子元素末尾即可。

   <div class="parent clearfix">
           <div class="child"></div>
           <div class="child"></div>
           <div class="child"></div>
           <br clear="all" />
    </div>

新增塊級格式化上下文BFC

BFC是一個獨立渲染區域，將內部與外部完全分隔開來，內部元素無法影響到外部。

它可以解決：

1. 垂直邊距重疊，阻止外邊距疊加

2. 不會重疊浮動元素

3. 可以包含浮動元素

   觸發條件：

   1. overflow除去visible以外的值，包括hidden，scroll，auto

   2. position：absolute或fixed

   3. float left或者right

   4. display：table-cell / table-caption / inline-block

為什麼講BFC，主要在於以上提到的BFC可以解決的問題：它可以包含浮動元素，並且不會影響外部。

那麼可想而知，只要可以觸發父元素BFC，就能解決浮動問題。

當然，以上方法各有各的優缺點。

1. 使用overflow時，要處理IE瀏覽器的相容問題最好使用hidden值，同時，定義父元素寬度或者給父元素設定zoom屬性。程式碼如下：

   .father{
       overflow: hidden;
       *zoom: 1;/*IE專屬*/
      /*width: 200px;設定一種即可*/
   }

但設定hidden後，可能會導致溢位元素被隱藏，不推薦使用。

2. 使用positon，增加多餘定位，可能帶來不必要的問題，不推薦。

3. 給父元素也定義浮動，可能會帶來新的浮動問題，不推薦使用。

4. 使用table，會將盒模型改變，不推薦使用。