# CSS BFC 到 grid flexbox 的演進

BFC是CSS 2.1開始有的
被觸發BFC的元素，自已就是一個小天地，不會影響到外面的東西

Box 是CSS 佈局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個Box 組成的。元素的類型和display 屬性，決定了這個Box 的類型。不同類型的Box， 會參與不同的Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。

## CSS Box的種類
- block-level box:display 屬性為block, list-item, table 的元素，會生成block-level box。並且參與block fomatting context；
- inline-level box:display 屬性為inline, inline-block, inline-table 的元素，會生成inline-level box。並且參與inline formatting context；

補充：css3 則多出了 flex box 和 grid box

---

## BFC佈局規則：
- 內部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- 元素會往左邊貼齊
- 如果”有”float元素在左邊，右邊沒float的元素會忽略float元素硬是往左邊疊在一起
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
- 計算BFC的高度時，浮動元素也參與計算

## BFC規則2 margin垂直重疊的範例
從下圖可見，沒有 BFC 的兩個 div 元素，分別為 box1 與 box2，box1 的橘色區塊 margin 緊貼 box2，產生了 margin 重疊的現象

完整程式碼範例請至以下連結觀看
https://codepen.io/not0000/pen/qppZow

## 含有以下CSS的TAG會變成一個新的BFC
- float的值不是none (如float:left、float:right)
- position的值不是static或者relative (如absolute、fixed)
- display的值是inline-block , table-cell , table-caption, flex , inline-flex 中的其中一个
- overflow的值不是visible(如hidden、auto、scroll)
- 使用 fieldset 元素（可以給表單元素設定環繞邊框的html元素）

---

## Display：Block Inline Grid Flex 等四種Formatting Contexts (BFC GFC)

這邊要講幾個新名詞，在 CSS2.1 的時代，排版只有 BFC 和 IFC ，CSS3的時候才有GFC和FFC。 GFC 與 FFC 是什麼呢?

這邊先解說排版的 Formatting Contexts，它是 W3C CSS2.1 規範中的一個概念。這是頁面中的一塊渲染區域，不同的Formatting Contexts 有自己一套渲染規則，這會決定其子元素將如何定位，以及和其他元素的關係和相互作用。

### BFC
BFC(Block Formatting Contexts)直譯為"塊級格式化上下文"。Block Formatting Contexts就是頁面上的一個隔離的渲染區域，容器裡面的子元素不會在佈局上影響到外面的元素，反之也是如此。如何產生BFC？
* float的值不為none。
* overflow的值不為visible。
* position的值不為relative和static。
* display的值為table-cell, table-caption, inline-block中的任何一個。
那BFC一般有什麼用呢？比如常見的多欄佈局，結合塊級別元素浮動，裡面的元素則是在一個相對隔離的環境裡運行。

### IFC
IFC(Inline Formatting Contexts)直譯為"內聯格式化上下文"，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)
IFC中的line box一般左右都貼緊整個IFC，但是會因為float元素而擾亂。float元素會位於IFC與與line box之間，使得line box寬度縮短。同個ifc下的多個line box高度會不同。兩個IFC中間如果插入塊級元素時（如p中插入div）會產生兩個匿名塊與div分隔開，即產生兩個IFC，每個IFC對外表現為塊級元素，與div垂直排列。

**IFC一般有什麼用呢？**
水平置中：當一個塊要在環境中水平居中時，設置其為inline-block則會在外層產生IFC，通過text-align則可以使其水平置中。
垂直置中：創建一個IFC，用其中一個元素撐開父元素的高度，然後設置
vertical-align:middle
其他行內元素則可以在此父元素下垂直置中。

### GFC
GFC(GridLayout Formatting Contexts)直譯為**網格佈局格式化上下文**，當為一個元素設置display值為grid的時候，此元素將會獲得一個獨立的渲染區域，我們可以通過在網格容器（grid container）上定義網格定義行（grid definition rows）和網格定義列（grid definition columns）屬性各在網格項目（grid item）上定義網格行（grid row）和網格列（grid columns）為每一個網格項目（grid item）定義位置和空間。
那麼GFC有什麼用呢，和table又有什麼區別呢？首先同樣是一個二維的表格，但GridLayout會有更加豐富的屬性來控制行列，控制對齊以及更為精細的渲染語義和控制。

### FFC
FFC(Flex Formatting Contexts)直譯為"自適應格式化上下文"，display值為flex或者inline-flex的元素將會生成自適應容器（flex container），ie9以前不支援，ie10,11少部分功能不支援。
Flex Box由伸縮容器和伸縮項目組成。通過設置元素的display屬性為flex或inline-flex可以得到一個伸縮容器。設置為flex的容器被渲染為一個塊級元素，而設置為inline-flex的容器則渲染為一個行內元素。
伸縮容器中的每一個子元素都是一個伸縮項目。伸縮項目可以是任意數量的。伸縮容器外和伸縮項目內的一切元素都不受影響。簡單地說，Flexbox定義了伸縮容器內伸縮項目該如何佈局。

## 參考文章

https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
https://www.jianshu.com/p/66632298e355
https://www.jianshu.com/p/0d09a2f095d4

###### tags: `css` `block format context`