目錄

• 浮動特性
• 清除浮動

浮動可以理解為讓某個行內元素脫離標準流，漂浮在標準流之上，和標準流不在一個層面上。float屬性用於建立浮動框，將其移動至左邊或右邊，直到左邊緣或右邊緣觸碰到包含塊的另一個浮動框的邊緣。

float:left|right|none;

浮動特性

1. 浮動元素會脫離標準流
   浮動的元素脫離了標準流的控制移動到指定位置，也就是所謂的脫標，浮動的盒子不會保留原來的位置，其他在標準流中的盒子就會佔有浮動盒子的原來的位置，可以理解為浮動的盒子與標準流中的盒子不在同一平面上，因此浮動的盒子可能會覆蓋標準流的盒子。
2. 浮動元素會具有行內塊元素的特性
   任何元素都可以浮動，不管是什麼型別的元素，新增浮動後就會有行內塊元素的特性。例如如果對行內元素指定了浮動，則不需要顯示轉化為行內塊元素就可以直接指定高度和寬度。
3. 浮動元素會在一行內顯示並且元素頂部對齊
   如果對多個兄弟元素指定了浮動，則它們會按照屬性值一行內顯示並頂端對齊。比如第一行有4個浮動元素,高度分別為10px,20px,40px,30px,則第二行元素都要對齊40px的元素，即所謂的一行內元素會頂端對齊，若寬度不夠，則後面的盒子會被擠到下一行對齊。

清除浮動

浮動元素有一個標準流的父親，但是有的時候由於要浮動的元素個數不確定導致最終高度不確定，無法為父親指定高度，由於浮動的盒子不會佔有原來的位置，因此父盒子的高度可能為0，又父盒子為標準流，故可能影響其他標準流，要清除浮動帶來的影響。清除浮動後，父盒子會根據浮動的元素自動檢測高度父盒子有了高度就不會影響下面的標準流了。

1. 額外標籤法
   在最後一個子級盒子後新增一個空標籤，設定標籤的樣式為clear:both,這個方法優點是書寫方便通俗易懂，缺點是每個父盒子中都有無用的空標籤堆積,結構性差。

...
.clear{
    clear:both;
}

...

<div>
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="clear"></div>
</div>
 

2. 父級新增overflow屬性
   為父級新增overflow屬性，將其屬性值設定為auto、hidden或scroll。優點是程式碼簡介，缺點是無法顯示溢位的部分。

...
.fa-box{
   overflow:auto;
}

...

<div class="fa-box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="clear"></div>
</div>

3. 父級新增after偽元素
   clearfix是基於父元素上使用:after"偽類，使用偽類在浮動元素的父容器後面建立隱藏元素。優點是沒有增加額外的標籤，結構更簡單，缺點是需要照顧低版本瀏覽器。

...
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    /*IE6、7專有*/
    *zoom:1;
}

...

<div class="fa-box clearfix">
       <div class="box">1</div>
       <div class="box">2</div>
       <div class="box">3</div>
       <div class="clear"></div>
</div>

4. 父級新增雙偽元素
   與第3種方法差不多，只是在前面也建立元素更好理解。

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

<div class="fa-box clearfix">
       <div class="box">1</div>
       <div class="box">2</div>
       <div class="box">3</div>
       <div class="clear"></div>
</div>