扯点：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做总结。