Web

CSS 認識 Float

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 沒有浮動效果(元素的預設值)

    1
    2
    3
    4
    <div>
    <img src="doggy.png">
    <p>Lorem ipsum dolor sit amet...</p>
    </div>
    1
    2
    3
    img {
    float: none; /*為預設值*/
    }

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

  • float: left 往左浮動

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

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

  • float: right 往右浮動

    1
    2
    3
    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。

    1
    2
    3
    4
    <div class="outer">
    <div class="float"></div>
    <p>Lorem ipsum...</p>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .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參數為absolutefixed
    • 元素的displayinline-block
    • overflow參數不為visible的block元素
    • display參數為flow-root的元素

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

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

    1
    2
    3
    4
    5
    .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(清除兩邊浮動)

    • 清除左邊浮動

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      .float{
      background-color: red;
      width: 300px;
      height: 100px;
      float: left;
      }
      .normal{
      background-color: green;
      width: 400px;
      height: 120px;
      }

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

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

    • 清除左右浮動

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

      Try it on codepen.

Share