CSS | 文档流 | Box盒模型 | FC BFC、IFC、FFC、GFC

文档流

“在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列(受书写模式影响)。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。”

“在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列(受书写模式影响)。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。”

脱离文档流

float 或者 position:absolute / fixed 可以让元素脱离文档流

脱离常规流的元素会创建一个新的块级格式化上下文（Block Formatting Context: BFC）环境

注：float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)

溢出

overflow
text-overflow

Box 盒模型

MDN 盒模型
页面中所有元素(content内特容)都被Box盒子包裹

• block box
• inline box

行内盒子：

1. 宽高无效；
2. 外边距、内边距和边框是部分生效的，
   垂直方向上的 margin padding border 无效。

使用 inline-block 可以使用宽高生效，同时避免垂直方向上的重叠

外边距折叠

同一块 渲染区域 发生外边距折叠的三种情况：

1. 相邻的兄弟元素
   块的上下，行的左右

2. 没有内容将父元素和后代元素分开

   • 没有 border，padding，行内内容做阻隔，也没有创建BFC，则块级元素的上边界会穿过父元素
   • 没有 border，padding，行内内容做阻隔，或没有规定 height / min-height (max-height看情况)来规定父元素范围，则块级元素的下边界会穿过父元素

3. 空的区块
   如果块级元素没有设定边框、内边距、行级内容、高度（height）、最小高度（min-height）来分隔块级元素的上边距（margin-top）及其下边距（margin-bottom），则会出现 其 上下外边距的折叠。

如果包含负边距，折叠后的外边距的值为最大的正边距与最小（绝对值最大）的负边距的和。
如果包含负边距，折叠后的外边距的值为最大的正边距与最小（绝对值最大）的负边距的和。
外边距折叠仅与垂直方向有关。

MDN 视觉格式化模型

FC （format context） 格式化上下文

MDN FC
表示一块独立的渲染区域（区域间互补影响），
定义了元素的边距、边框和填充如何与同一上下文中的其他块交互。
渲染规则：

1. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
2. 垂直方向上会适用外边距折叠规则
3. 从上向下的正常流，根据盒子规则渲染

参考博客

BFC

FFC 和 GFC 除布局之外，与区块格式化上下文类似。弹性/网格容器中没有可用的浮动子级。

IFC

段落的上下文