containing block和BFC

1、Box

Box 是 CSS 布局的对象和基本单位，元素的类型和 display 属性，决定了这个 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；

块级盒的是参与块级上下文排版的一种盒子，每个块级元素都会生成这种盒子，并且参与任何有关定位的计算。盒模型结构如下：

他们分别定义了content box、padding box、border box、margin box。

2、containing block

定义：元素盒子的位置和尺寸往往是相对于一个确定的矩形计算的，我们称这个矩形为元素的包含块。

如果这个元素的position值是relative或static，这个元素的包含块是由离其最近的块级的祖先盒子的内容的边content-edge构成的。就是离其最近的块级祖先盒子的content-box。

如果position：fixed，它的CB就是ICB（initial containing block，根元素所在的containing block）。

如果position:absolute，如果不存在除static定位的父元素，则CB为ICB。否则的话：

1. 若block container不是inline box，则其CB与这个父block container(block box/inline box/table cell)的padding box重叠。
2. 若block container是inline box，如果 'direction' 是 'ltr'，包含块的顶、左边是祖先元素生成的第一个框的顶、左内边距边界(padding edges) ，右、下边是祖先元素生成的最后一个框的右、下内边距边界(padding edges)。如果 'direction' 是 'rtl'，包含块的顶、右边是祖先元素生成的第一个框的顶、右内边距边界 (padding edges) ，左、下边是祖先元素生成的最后一个框的左、下内边距边界 (padding edges)。





3、BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC有一些规则：

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

触发BFC

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不为visible

BFC应用：

1. 两列布局。
2. 清除内部浮动，撑开父高度。
3. 防止两个margin重叠。