深入理解 BFC、IFC、GFC、FFC

1、定义

BFC全称是 block formatting context，也就是 块级格式化上下文，是用于 布局块级盒子 的一块渲染区域。
IFC全称是 inline formatting context，也就是 内联格式化上下文，是用于 布局内联元素盒子 的一块渲染区域。
GFC全称是 gridLayout formatting context，也就是 网格布局格式上下文，是用于 布局网格容器 的一块渲染区域。
FFC全称是 flex formatting context, 也就是 灵活格式化上下文，是用于 布局弹性容器 的一块渲染区域。

2、文档流

2.1、文档流的分类

定位流（Absolute Position）
浮动流（Float）
普通流（FC）：有 BFC、IFC、GFC（网格布局格式上下文）、FFC（灵活格式化上下文）

2.2、定位方案

– 常规流(Normal flow)

CSS2.1中，常规流包括块级盒的块格式化，行内盒的行内格式化，以及块级盒和行内级盒的相对定位。

– 浮动(Floats)

在浮动模型中，盒首先根据常规流布局，然后从常规流中脱离并尽可能地向左或向右位移。内容可以布局在浮动周围。

– 绝对定位(Absolute positioning)

在绝对定位模型中，盒完全从常规流中脱离（对后面的同胞元素无影响）并根据包含块来分配位置。

3、视觉格式化模型(Visual Formatting Model)

视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，根据上述的盒模型，为文档元素生成盒（Box）。通俗的说，视觉格式化模型就是文档里的盒子布局呈现的一种规则。

影响布局的因素：

盒的尺寸和类型
定位方案 Positioning Scheme （常规流，浮动和绝对定位）
文档树中元素之间的关系
外部信息（如：视口大小，图片的固有尺寸等）

3.1、块级元素(Block-level elements)

当元素的 CSS 属性 display:block / list-item / table 时，它就是是块级元素 block-level ，视觉上呈现为块，竖直排列。每个块级元素生成一个主要的块级盒 (Principal Block-level Box) 来包含其后代盒和生成的内容，同时参与定位体系 (Positioning Scheme) 。某些块级元素还会在主要盒之外产生额外的盒： list-item 元素。这些额外的盒会相对于主要盒来摆放。

3.2、块级盒(Block-level boxes)

由块级元素生成，参与块级格式化上下文(BFC)。描述元素跟它的父元素与兄弟元素之间的表现。

3.3、块容器盒(Block container box)

只包含其它块级盒，或生成一个行内格式化上下文(inline formatting context)，只包含行内盒。有些块级盒，比如表格，不是块容器盒。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。

3.4、块盒(Block boxes)

同时是块容器盒的块级盒。

3.5、匿名块盒(Anonymous block boxes)

没有名字，不能被 CSS 选择符选中。块容器盒要么只包含行内级盒，要么只包含块级盒，但通常文档会同时包含两者，在这种情况下，将创建匿名块盒来包含毗邻的行内级盒。

3.6、行内级元素(Inline-level elements)

当元素的 CSS 属性 display：inline, inline-block 或 inline-table 时，称它为行内级元素。行内级元素生成行内级盒(inline-level boxes)，参与行内格式化上下文(IFC)。

3.7、行内级盒(Inline-level boxes)：

所有 display:inline 的非替换元素生成的盒是行内盒。

3.8、原子行内级盒(atomic inline-level boxes)

不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level boxes)。

3.9、原子行内盒(atomic inline boxes)

注意：起初原子行内级盒(atomic inline-level boxes)被称为原子行内盒(atomic inline boxes)。很不幸，它们并非行内盒。规范的勘误表修正了这个错误。不管怎样，当再看到原子行内盒时可以放心的当成原子行内级盒，因为只是改了名字。原子行内盒在行内格式化上下文里不能分成多行。

3.10、行盒(Line boxes)

行盒由行内格式化上下文(IFC)产生的盒，用于表示一行。在块盒里面，行盒从块盒一边排版到另一边。当有浮动时, 行盒从左浮动的最右边排版到右浮动的最左边。

3.11、匿名行内盒(Anonymous inline boxes)

匿名行内盒最常见的例子是块盒直接包含文本。

4、触发条件、布局规则、应用场景

4.1、BFC 的触发条件、布局规则、应用场景

触发条件

根元素或其它包含它的元素
浮动 float: left/right/inherit
绝对定位元素 position: absolute/fixed
行内块 display: inline-block
表格单元格 display: table-cell
表格标题 display: table-caption
溢出元素 overflow: hidden/scroll/auto/inherit
弹性盒子 display: flex/inline-flex

布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

应用场景

闭合浮动：浮动区域不叠加到BFC区域上
防止与浮动元素重叠
防止margin collapse
float 元素高度塌陷
…

4.2、IFC 的触发条件、布局规则、应用场景

触发条件

一个块级元素中仅包含内联级别元素

布局规则

内部的盒子会在水平方向，一个接一个地放置。
这些盒子垂直方向的起点从包含块盒子的顶部开始。
摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。
在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和存在的浮动来决定。
IFC中的 line box 一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float 元素会位于IFC与与 line box 之间，使得 line box 宽度缩短。
IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同（比如一行包含了较高的图片，而另一行只有文本）
当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性来确定，如果取值为 justify，那么浏览器会对 inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。
当一个 inline box 超过 line box 的宽度时，它会被分割成多个boxes，这些 boxes 被分布在多个 line box 里。如果一个 inline box 不能被分割（比如只包含单个字符，或 word-breaking 机制被禁用，或该行内框受 white-space 属性值为 nowrap 或 pre 的影响），那么这个 inline box 将溢出这个 line box。

应用场景

水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过设置父容器 text-align:center 则可以使其水平居中。
垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

4.3、GFC 的触发条件、布局规则

触发条件

当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域

布局规则

通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间