元素排版方式

進行網頁排版時，每種元素通常都會遵照預設的排版方向 ( Normal Flow ) 進行排列，不同顯示屬性的元素具有不同的預設排版方向，這篇教學會介紹不同元素的排版格式，以及 IFC 和 BFC 在排版格式上的差異。

快速導覽：

• 預設排版方向 ( Normal Flow )
• 改變預設排版方向的因素
• 認識排版格式 ( Formatting Context )
• 行內容器排版格式 ( IFC )
• 區塊容器排版格式 ( BFC )

元素預設的排版方向

網頁元素預設排版方向稱為 Normal Flow ( 正常流向 )，在沒有進行任何設定的狀態下，會按照下列規則排列：

• 採用「相對位置」排列，當元素周遭元素或父元素位置或尺寸變化時，也會影響元素的位置。
• 行內元素採用「左到右、上到下」排列 ( 右到左語系為右到左 )。
• 區塊元素採用「上到下」排列。

改變預設排版方向的因素

雖然元素會按照排版的正常流向進行排版，但只要透過下列方式，就能改變排版的方向：

• 修改 display 顯示類型：直接改變元素預設排版行為 ( 例如 block 變成 inline，參考 容器顯示類型 )。
• 使用 float 浮動：讓元素離開原本版面 ( 類似從原本的平面浮起變成浮動狀態 )，根據浮動規則排列。
• 修改 position 定位：指定元素採用相對位置或絕對位置定位。
• 使用其他排版方式：例如 flex、grid、table、column 等均有各自的排版規則。

認識排版格式 ( Formatting Context )

Formatting Context 表示「元素在和其他元素互動時，需要遵守的排版格式」，這個格式定義了元素、元素的外部元素、元素的子元素之間的位置和排列關係，Formatting Context 根據元素的顯示類型，主要分成兩大類：

• 行內容器排版格式 Inline Formatting Context ( IFC )
• 區塊容器排版格式 Block Formatting Context ( BFC )

如果元素顯示屬性是 table、flex、grid，則除了會套用 BFC，也會搭配對應的排版格式一同使用，這些格式大致可分成下面三類 ( 會用額外篇幅介紹這些容器與排版方式 )：

• 表格容器排版格式 Table Formatting Context ( TFC )
• 彈性容器排版格式 Flex Formatting Context ( FFC )
• 網格容器排版格式 Grid Formatting Context ( GFC )

行內容器排版格式 ( IFC )

只要是行內容器 ( display: inline 元素 )，都會建立具有「行內容器排版格式」的 IFC 環境 ( Inline Formatting Context )，IFC 環境裡的元素會按照下列規則進行排版：

• 從所在容器的頂部開始「水平排列」。
• IFC 環境裡的每一行都會產生一個「行框」。
• 如果內容因自動換行而出現「多行」狀況時，會自動分成多個垂直排列的行框。
• 如果內容無法自動換行，則內容會溢出元素容器。
• 寬度主要由「內容、容器邊界」計算，高度主要由「內容高度、字型大小、行高」計算。
• 垂直對齊時，如果高度小於父元素高度，則使用「vertical-align」對齊，預設值為 baseline 基線。
• 水平對齊時，如果寬度小於父元素寬度，則使用「text-align」對齊，預設值為 left。

IFC 環境有個特色，如果內容裡出現了其他行內元素，則被截斷的文字會自動生成新的「匿名」元素 ( 沒有元素標籤包覆的內容 )，以下方的例子而言，p 元素裡的內容，預設會產生「五個」行內容器，分別是 strong、em 和三個匿名元素 ( STEAM 教育學習網透過一系列、的教學與範例，讓所有人都能、STEAM 的學習領域。 )，如果顯示畫面發生「換行」情況，則會產生額外的行框。

透過 CSS 的方式設定 p 裡所有元素的垂直對齊方式，就能看出 IFC 環境裡的行內元素，都按照垂直對齊規則進行對齊，發生換行後，不同行的元素會在該行裡遵循規則排列。

線上展示：https://codepen.io/oxxo/pen/rNEJbpp

<!-- HTML 程式碼-->
<p>STEAM 教育學習網透過一系列<stong>免費且高品質<strong>的教學與範例，讓所有人都能<em>輕鬆跨入</em> STEAM 的學習領域。</p>

<!-- CSS 程式碼 -->
<style>
  p *{
    vertical-align: top;
  }
  strong {
    font-size: 50px;
  }
  em {
    font-size:10px;
  }
</style>

區塊容器排版格式 ( BFC )

相較於 IFC 環境，BFC ( Block Formatting Context ) 的定義就較為廣泛，根據 W3C 的描述，只要是符合下列規則，都會建立一個具有「區塊容器排版格式」的 BFC 環境：

• html 元素以及所有 display: block 的元素。
• 使用 float 或 position 屬性變成浮動、絕對定位的元素。
• display: inline-block 的元素。
• 表格、儲存格或任何 display: table-* 屬性相關的元素。
• overflow 屬性不是 visible 的區塊容器元素。

在 BFC 環境裡的子元素，會具有下列的特色：

• 如果是區塊容器元素，會從所在父元素的頂部開始「垂直排列」。
• 位於同一個 BFC 環境裡的區塊容器之間，由「margin」定義垂直間距。
• 位於同一個 BFC 環境裡的區塊容器「margin 會重疊」，如果在不同的 BFC 環境裡，就不會重疊，重疊會採用「最大的 margin 值」。
• 設定浮動、絕對定位、表格、flex、grid 元素會建立新的 BFC 環境但仍保有自己的規則，這些元素的子元素，預設會貼齊父元素左側。

下方的例子展示了位於一個 div 裡的三個 div，這三個 div 雖然都有設定 margin，但因為必須符合 BFC 環境的規則，中間的 margin 就會重疊在一起。

線上展示：https://codepen.io/oxxo/pen/mdZXgpN

<!-- HTML 程式碼 -->
<div>
  <div class="a">apple</div>
  <div class="a">banana</div>
  <div class="a">oxxo</div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 0;
    border: 1px solid #000;
  }
  .a {
    margin: 30px;
  }
</style>

小結

元素排版方式主要是網頁排版的觀念，除了邊界重疊的情形較為特殊，其他大部分的狀況都是常見且容易理解的，對於實際操作並不會產生什麼的影響，不過透過這篇教學，應該能更深入認識不同元素的排版規則。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～