iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 28
2

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參數為absolutefixed
    • 元素的displayinline-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定位屬性。那就明天雲端再會~

*有任何錯誤或描述不夠精準之處,歡迎指教,非常感謝。/images/emoticon/emoticon41.gif


上一篇
Day27 CSS:Display
下一篇
Day25 CSS:Position
系列文
從門外漢到前端新手30

1 則留言

0
Askie Lin
iT邦新手 5 級 ‧ 2019-10-13 17:34:15

圖文並茂耶,很清楚,謝謝妳!

JinWen iT邦新手 5 級‧ 2019-10-14 15:26:28 檢舉

/images/emoticon/emoticon24.gif

我要留言

立即登入留言