【日常记录】CSS抽象概念-堆叠上下文、BFC与margin合并

CSS中有一些抽象的概念，这篇博客主要用来总结对这些抽象概念的一些理解。

1. 堆叠上下文（the stacking context）

堆叠上下文是一个抽象的概念，我们没法定义，但是可以定义触发它的条件，几个常见的触发条件：
- 根元素html
- z-index的值不为auto的相对或者绝对定位的元素
- opacity的值小于1的元素
- z-index的值不为auto的flex项目。

一旦触发了堆叠上下文，自然的垂直顺序会发生改变，z-index负值出现的位置在border之前，块级元素之后。
堆叠上下文会创建出一个独立的区域，归属于这个区域的所有元素，在垂直方向应该出现的顺序全部以这个区域的顺序为准，而它们本身所处的顺序就失效了。

z-index 为 9999 的绝对定位元素，并不一定在 z-index 为 0 的相对定位的元素上。
如果想要更深一步的理解堆叠上下文，可以参考张鑫旭：
深入理解CSS堆叠顺序
MDN-层叠上下文

2. BFC （Block Formatting Context）

1. CSS规范中对 BFC 的描述
   浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和’overflow’不为’visible’的块盒会为它们的内容建立一个新的块格式化上下文。
   在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并。
   在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
2. MDN 对 BFC 的描述
   一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

一个块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption,HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all
- 的元素并不被包裹在一个多列容器中。

一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
也就是说，如果一个元素的父元素和它本身都是BFC，那么它的子元素就不再归属它的父元素管理。

另外，在上述创建BFC的条件当中，只有display：flow-root;不会带来其他副作用，但是这个属性还没有被主流浏览器大规模支持使用。

3. BFC到底有什么作用
   让父元素包裹住它的子元素
   分隔开兄弟元素
4. 面试时如何回答什么是BFC
   不直接解释，用作用加代码进行说明
5. 没有任何一种效果必须用BFC实现，应该寻找更多无副作用的可替代方案

3. 外边距合并（margin collapsing）

三种会发生margin合并的情况：