前文

在之前的篇幅中我們提到了 inline box 以及 block box 並且知道在 flow 流佈局中，inline box 會遵守著 IFC（inline formatting context） 而 block box（block formatting context） 會遵守著 BFC，formatting context 中文稱為格式化上下文，box 會去遵從在這個環境中的格式化上下文進行佈局，今天要談到的便是 BFC、IFC 各自佈局的特色，而在進入 BFC、IFC 前不知道你們有沒有注意到 context 中文翻譯「上下文」的這個單字，其實這個西方單字在中文裡沒有能比較直接對應的詞彙，我們來看看字典怎麼說。

劍橋字典這麼解釋這個單字：

the situation within which something exists or happens, and that can help explain it

牛津字典則這麼解釋：

The circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood.

我們可以看見 context 不單單指佈局，而是用環境、情況等單字去解釋 context，本身可以這麼理解：

「在一個整體中，周圍的環境、因果脈絡、環境設定等東西，會根本性的影響「事件」本身的意義。」- 創誌

在不同文化造成的差異下，東方中沒有比較直接能對應這個詞彙的單字，就好比在加勒比海原始民族中並沒有細分「靈魂」、「生命」、「心」的概念，所以若是要把上面三種詞彙換成單一的字詞讓他們明白是困難的，因為他們本身就沒有區分這三個概念，自然也不會發展出能夠支撐這三個概念的詞彙了，而 context 之於中文也是如此，通常 context 會出現在電機、通訊等領域中，一般翻譯成上下文、語境，自 CSS 中的三維概念 stacking context 我們也可以再次看到這個詞彙被使用到。

規範中 formatting context 的節錄：
A formatting context is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules.
直通車：CSS Display Module Level 3

回到規範中，我們可以這麼理解，格式化上下文代表著一種環境與之相關盒子會在這組環境中佈局，不同的格式上下文 box 將會根據不同上下文的佈局規則佈局。

formatting context 還有 flex、grid 等等。

了解上下文大約的概念後，我們就可以進入到 BFC、IFC 本身中：

BFC（block formatting context）

規範直通車：
CSS Display Module Level 3
規範定義：
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.

BFC 之中，box 佔滿包含塊的寬度，並且根據它的包含塊，自頂部一個一個垂直排列，兄弟元素之間的垂直距離由 margin 所制定。這邊要特別小心我們之前提到的 margin-collapse，在參與同一個 BFC 之中的 block-level box 垂直方向上會產生，這時候就可以透過其他設置去避免掉這個情況，細節可以參照 margin collapse 的章節。

話說 Margin-collapse 是什麼呢？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

<div class="first">
  <span>1</span>
  <div class="second">
    <span>2</span>
    <div class="third">
      <span>3</span>
    </div>
  </div>
</div>

寬度會自動佔滿，所以 first = second = third 的寬度，若是本身參照寬度為 100% 的螢幕寬度，就不用再另行設置 100% 也同樣會佔滿寬度。

.first{
  background-color: pink;
}
.second{
  height: 100px;
  background-color: lightblue;
  position: relative;
  top: 50px;
}
.third{
  height: 100px;
  background-color: orange;
  position: relative;
  top: 50px;
}

A box either establishes a new independent formatting context or continues the formatting context of its containing block

通常元素形成的 block box 在 flow 中，會包含一組格式化上下文（有時候一個 box 中也會不只有一組格式化上下文，例如 display: table），在 box 只包含 inline box 狀態下會產生一組 IFC 給 inline box 有可以依循的格式化上下文，若是包含了 block box、同時包含 inline box 以及 block box 則會繼續讓後代元素參與 box 本身參與的 BFC，而非讓他們各自遵守 IFC、BFC，詳情可以見前一章的匿名盒子。

• root 元素會產生 BFC，一般的 flow 佈局中，假如根元素後包含的子代都沒有新生成塊級格式化上下文，其 block box 遵守的是其包含塊 root 的 BFC 。

下列幾種狀態，會產生 BFC ：

1. root
2. float 不為 none
3. position: absolute、fiexed
4. display: inline-block、table-cell、table-caption…
5. overflow 不為 overflow: visible
6. display: flex 的子代元素
7. display: grid 的子代元素
8. ...。

更多會產生 BFC 的情況請參照 MDN： https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

IFC

規範直通車：
CSS Display Module Level 3
規範定義：
An inline formatting context is established by a block container box that contains no block-level boxes. In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block.

IFC 是 inline box 所遵守的格式化上下文，特色是參與 IFC 的 box 會水平的一個一個排列，我們平常所見到的 img、span 元素所生成的 box 都是遵守這個格式化上下文。inline box 遵守的 IFC 由包含它的 block container box 所生成，要記得的是 block container box 在 flow 中會新生成一組 IFC、或者就是讓它的後代遵守包含塊所參與的 BFC。

以這個例子來說，今天我們設置一組包含許多 <span> 的 <div>，而 <div> 此時的 block container box 會生成一組 IFC，而位於其中的 inline box 便可以去遵從這一組格式化上下文水平排列。

<div>
    <span>lorem</span>
    <span>lorem</span>
    <span>lorem</span>
    <span>lorem</span>
    <span>lorem</span>
...
    <span>lorem</span>
</div>

div{
  outline: 2px dashed orange;
  width: 30%;
}
span{
  outline: 1px dashed;
}

結語

上述提到了 box 所遵守的格式化上下文，除此之外還有諸如 flex formatting context、grid formatting context 等不同的格式化上下文，box 在其中的佈局會有不同的樣貌，我們明天見～

參考資料：

CSS Display Module Level 3
Visual formatting model
https://vide.tw/1351

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