扯點：FC - Formatting Context

FC（Formatting Context）指頁面中一個渲染區域，而且擁有一套渲染規則，他決定了其子元素如何定位，以及與其餘元素的相互關係和做用。常見的FC有BFC、IFC，GFC和FFC。

BFC

BFC(block formatting context)直譯爲"塊格式化上下文"。

1. block - 塊級盒參與塊格式化上下文
2. context - 這裏的上下文指一個流：普通文檔流, float, position

它是一個獨立的渲染區域。它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

觸發條件

• the root element or something that contains it - 根元素或其它包含它的元素
• floats (elements where float is not none) - 浮動元素 (元素的 float 不是 none)
• absolutely positioned elements (elements where position is absolute or fixed) - 絕對定位元素 (元素的 position 爲 absolute 或 fixed)
• inline-blocks (elements with display: inline-block) - 內聯塊 (元素具備 display: inline-block)
• table cells (elements with display: table-cell, which is the default for HTML table cells) - 表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性)
• table captions (elements with display: table-caption, which is the default for HTML table captions) - 表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性)
• anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), or inline-table - 匿名錶格元素，在元素display：table, table-row, table-row-group, table-header-group, table-footer-group(分別是默認的HTML表、錶行,表,表頭和表頁腳)，inline-table時建立
• block elements where overflow has a value other than visible - 具備overflow 且值不是 visible 的塊元素
• display: flow-root
• elements with contain: layout, content, or strict - 元素有contains屬性，值爲layout, content, or strict
• flex items (direct children of the element with display: flex or inline-flex) - flex items（display: flex or inline-flex元素的直接子元素）
• grid items (direct children of the element with display: grid or inline-grid) - grid items（display: grid or inline-grid）
• multicol containers (elements where column-count or column-width is not auto, including elements with column-count: 1) - multicol containers（元素的column-count或者column-width不是auto，包括元素column-count設置成1）
• column-span: all should always create a new formatting context, - even when the column-span: all element isn't contained by a multicol container - column-span: all 老是會建立一個新的格式化上下文，即使具備 column-span: all 的元素並不被包裹在一個多列容器中。

截止到2018.1.9爲止，查看最新的觸發條件 MDN連接

約束規則

1. 在塊格式化上下文中，盒從包含塊頂部一個接一個地垂直襬放。
2. 兩個同胞盒間的垂直距離取決於 margin 屬性。
3. 同一個塊格式化上下文中的相鄰塊級盒的垂直外邊距將摺疊。
4. 每一個盒的左外邊緣緊貼包含塊的左邊緣（從右到左的格式裏，則爲盒右外邊緣緊貼包含塊右邊緣），有浮動也是如此
5. BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。外面的元素不會影響到容器內的子元素。
6. 計算BFC的高度時，浮動元素也參與計算

IFC

GFC，FFC

GFC，FFC是在css3提出的規範，後面會結果flex和grid作總結。