Float浮動屬性

float的使用，通常是想在版面上做出文繞圖的效果，但也可以應用在元素的左右對齊。float屬性有下列定位特性：

• 讓元素脫離normal flow，浮動到父容器的上內緣（top），並往右right或往左left貼齊父容器的左內緣或右內緣。
• 它會改變line box的寬度，相鄰在float元素後面元素的line box會呈現圍繞著浮動元素的效果。
• float元素的定位是out of flow，所以父容器內部空間會有float collapse的現象。

Float參數值：

none（元素的預設值） ｜ left（向左浮動） ｜ right（向右浮動） ｜

• float: none 沒有浮動效果（元素的預設值）

  <div>
    <img src="doggy.png">
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  

  img {
      float: none; /*為預設值*/
  }
  

  <p>與<img>都在normal flow中照水平、垂直向下，還有文檔的元素順序排列。
  

• float: left 往左浮動

  img {
      float: left; /*往左浮動*/
  }
  

  <img>元素out of flow，貼齊block container的上內緣，float元素的左外緣貼齊block container的左內緣，而<p>元素內的line box寬度被float元素的所在的位置擠壓，縮短了寬度，圍繞在float元素邊緣，形成文繞圖的效果。

  

• float: right 往右浮動

  img {
      float: right; /*往右浮動*/
  }
  

  <img>元素out of flow，貼齊block container的上內緣，float元素的右外緣貼齊block container的右內緣。也同樣縮短<p>的line box。
  

Try it on codepen.

使用float會遇到的問題及解決方法

1. float collapse：
   當float元素out of flow時，它的block container因為沒有內容撐開高度，就會壓縮成沒有內容的大小。（上列範例可以是<p>元素的內容在撐高度。）如果沒有其它內容撐開，block container就會扁塌，而float元素就會溢出block container。

   <div class="outer">
       <div class="float"></div>
       <p>Lorem ipsum...</p>
   </div>
   

   .outer{
       outline: 1px solid #000;
   }
   .float{
       width: 250px;
       height: 100px;
       background-color: orange;
       float: left;
   }
   

   

   橘色區塊原本也參與block container的normal flow，設定float值而out of flow，它就脫離block container高度值的計算範圍，形成float元素溢出的情形，這個情況叫做float collapse。若在float元素的父層新建BFC就可以解決這個問題。

   我們在Day25 CSS：BFC時有列出什麼條件下會新建BFC，僅列舉以下做法（想知道更多，可以回到Day25的文章看一下）：

   • 元素的float參數不為none
   • 元素的position參數為absolute或fixed
   • 元素的display為inline-block
   • overflow參數不為visible的block元素
   • display參數為flow-root的元素

   第一、二種做法會讓父元素out of flow，而第三種做法會改變父元素對外參與的formatting context，除非父元素在排版上有這樣的必要，否則第四、第五的做法是比較不會影響父元素本身參與的佈局。

   所以我們可以用下列聲明來解決float collapse，在block container新增一個BFC，讓float元素得以參與在一個新的normal flow環境中。

   .outer { display: flow-root;}
   /*或是*/
   .outer { overflow: auto;}
   .outer { overflow: hidden;}
   .outer { overflow: scroll;}
   

   

   我個人更偏好display: flow-root，它只創造BFC，沒有其它效果，是最單純的做法。

2. Clear：

   float元素會蓋住在它後方的box（如果後方box的內容不是line box的話，就無法自動適應float元素的範圍）。

   這時候就可以用clear屬性來清除浮動效果，如此一來，float區塊可以保它的對齊效果，而後方的元素也不會被遮蓋。clear參數值有：

   none（預設值） | left（清除左邊浮動） | right（清除右邊浮動） | both（清除兩邊浮動）

   • 清除左邊浮動

     .float{
         background-color: red;
         width: 300px;
         height: 100px;
         float: left;
     }
     .normal{
         background-color: green;
         width: 400px;
         height: 120px;
     }
     

     

     .normal{
         clear: left; /*清楚左邊浮動*/
     }
     

     

   • 清除右邊浮動
     類似上列做法，用來避開float: right元素，不贅述。

   • 清除左右浮動

     

     .normal{
         clear: both; /*清楚左右浮動*/
     }
     

     

     Try it on codepen.

通常float是用來作文繞圖的效果，有些人不會拿它來當對齊的屬性使用，不過如果有用到float來對齊的話，clear屬性是必要認識的。下一篇我們會來認識position定位屬性。那就明天雲端再會～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。