清除浮動

浮動元素會排列在父級的邊界處或者前一個浮動元素以後

一、不清除浮動產生的問題

（1）因爲浮動元素已經脫離正常文檔流，當父級元素的高度小於浮動元素的高度時，出現「高度塌陷」問題。

<div id="div1">
      <div class="child1">child1</div>
 </div>
 <div id="div2"></div>
 
 #div1 {
      border: 1px solid black;
    }
    .child1 {
      width: 100px;
      height: 100px;
      background: red;
      float: left;
    }
    #div2 {
      margin-top: 20px;
      width: 100%;
      height: 20px;
      border: 1px solid green;
    }
複製代碼

此時div1元素的高度爲0，是由於child1元素浮動，脫離正常文檔流，使得父級div1元素未被撐開，同時影響div2元素排版。以下所示：

（2）文字圍繞浮動元素排版（浮動元素不用會影響塊級元素排列，只會影響內聯元素）

• 內聯元素

<div class="child1">child1</div>
<span>哈哈哈哈哈哈哈哈哈哈....</span>
複製代碼

此時若是給div1元素添加浮動，div2和div3的排列方式不會被改變。

• 塊級元素

<div class="div1">div1</div>
  <div class="div2">div2哈哈哈哈哈哈</div>
  <div class="div3">div3</div>
複製代碼

此時給div1元素添加浮動，並不會影響div2和div3元素的排列方式，可是會影響裏面文本的排列方式，文字會排列在前一個浮動元素以後。

二、清除浮動方式

<div id="wrap" class="clearfix">
  <div class="div1">div1</div>
  <div class="div2">div2哈哈哈哈哈哈</div>
  <div class="div3">div3</div>
  <div class="clear"></div>
</div>
複製代碼

（1）利用父級僞元素::after清除（儘可能定義公共類，提升複用）

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}
.clearfix{
    兼容ie6,ie7解決浮動
    zoom:1;  
}
複製代碼

原理：在父級元素的最後面，添加一個空標籤，使用clear:both屬性，表示空標籤的左右都不能有浮動元素，可是浮動元素的位置已經肯定，因此空標籤就只能渲染在浮動元素下方，而父元素必須考慮非浮動子元素的位置，因此父容器的高度被撐開。

（2）在浮動元素結尾處添加塊級空標籤(必須是塊級元素)

.clear{;
    clear:both
}
複製代碼

原理同利用僞元素清除同樣。

（3）給父元素定義height

（4）讓父元素產生BFC

原理：計算BFC的高度時，浮動子元素也參與計算

overflow:hidden/auto/scroll;
float:right/left;
display:inline-block/table-cell/table-caption/flex/inline-flex;
position:absolute/fixed
複製代碼

以上任何一個屬性均可以觸發BFC，清除浮動。