倘若不斷向深處扎根，就能茁壯成長 - 出自 RM

前言

在前面的章節中，我們提到了不同類型的 box 以及各種 box 會遵守的格式化上下文，在接下來的章節中，我們將介紹 CSS 中三種不同的定位方式，我們可以根據對於版面的需求進而選擇不同的定位方式，這三種定位方式分別為：

1. Normal flow
2. Float
3. Absolute

規範直通車：
Visual formatting model

1. Normal flow：

規範定義：
Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

所謂的 Normal Flow 代表是 box 參與一種格式化上下文，box 可能是 inline、block，其中 block-level box 參與 Block formatting context、 inline-level box 參與 Inline formatting context。

2. Float：

使用 float 佈局時，首先計算 box 在 Normal flow 之中的定位，再來 box 會被移出 flow，接著會按照我們所設定的 float: left、float: right 在當前行中左右移動，直到碰到其包含塊邊界。

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

除此之外，當 float 元素後有 block-level box 時，block-level box 會相當於直接忽視這個 float 元素進行佈局，相當於浮動元素不存在一樣，這是由於浮動元素本身不在 Normal flow 中，所以 block-level box 會依舊按照 BFC 垂直排列。（在此先不提及 float 對於 line box 的影響及作用。）

3. position: absolute

規範定義：
In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

絕對定位會完全從 Normal flow 移出，不遵守 IFC、BFC 格式化上下文，此時 box 對於其後兄弟姊妹元素已經沒有影響，位置則會相對於包含塊(非 position: static)去定位。

• containing block： box 本身的位置是相對於某個矩形去建立的，這個稱為 box 的 containing block，詳情可以參考 Visual Formatting Model - 定義、containing block - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 篇。

三種定位範例：

上面這三種定位方式可以拿以下的範例來說，下面的元素中有混合三種定位方式：

Codepen：三種定位

<div class="block-level"></div>
<div class="absolute"></div>
<div class="block-level"></div>
<div class="float"></div>
<div class="block-level"></div>

body{
  position: relative;
}
div{
  width: 100px;
  height: 100px;  
  outline: 1px dashed;
}
.block-level{
  background-color: #cfcfcf;
}
.absolute{
  background-color: #4e4e4e;
  position: absolute;
  top: 0px;
  left: 300px;
}
.float{
  width: 50px;
  height: 50px;
  background-color: pink;
  float: left;
  opacity: .5;
}

絕對定位

以上圖的例子來說，我們可以看到總共有 5 個 box，分別為三個按照 Normal flow 中 BFC 佈局的 block-level box 、一個絕對定位 box，以及一個浮動 box。可以看見其中 3（block-level box）的 box 定位並不會受到 2（position: absolute）的影響，這是因為 2（position: absolute）本身遵守絕對定位，已經脫離 Normal flow，所以 2 不會影響到按照 Normal flow 中 BFC 定位的 3，也就是不會影響其後的兄弟姐妹 block-level box 在 Normal flow 的定位。

浮動

至於 4（float）則是浮動 box，在這個定位下我們可以看見 Normal flow 中的 3（block-level box）、5（block-level box） 不會受到 4（float）影響，在浮動元素前後的 3（block-level box）、5（block-level box） 像是直接忽視 4（float） 一樣繼續排版，這其實是因為浮動佈局並不在 Normal flow 之中，所以 block-level box 會繼續按照其 BFC 垂直依序排列，就像是浮動元素不存在一樣。

結語

在這裡我們看見了 CSS 的三種定位方式，可以看見 Normal flow 中 box 會按照 BFC、IFC 等格式化上下文去進行佈局，除此之外絕對定位、浮動佈局也有各自的定位規則，混用時則會像上述範例一樣佈局，今天介紹到這裡，我們明天見～

參考資料：

1. CSS Display Module Level 3
2. Visual formatting model

以上的部分有任何錯誤的地方，歡迎指正呦～非常感謝～～XD