CSS 認識 Float

2020-03-01

css, front-end, web

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會遇到的問題及解決方法

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參數為absolute或fixed
- 元素的display為inline-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，沒有其它效果，是最單純的做法。
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.

Web

Float浮動屬性

Float參數值：

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