包含块 Containing Block

https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block

包含其他盒子的块称为包含块

当盒子的布局跑到包含块的外面时称为溢出（overflow）。

包含块影响盒模型属性和偏移属性：

1. 要计算 height top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto 或 0。
2. 要计算 width, left, right, padding, margin 这些属性的百分比值，通过包含块的 width 属性的值。

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：

1. 如果 position 属性为 static 或 relative ，包含块就是由它的最近的祖先块元素（比如说inline-block, block 或 list-item元素）或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。
2. 如果 position 属性为 absolute ，包含块就是由它的最近的 position 的值不是 static （也就是值为fixed, absolute, relative 或 sticky）的祖先元素的内容区的边缘组成。
3. 如果 position 属性是 fixed，包含块就是由 viewport (in the case of continuous media) 或是组成的。
4. 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
1. A transform or perspective value other than 'none'
2. A will-change value of transform or perspective
3. A filter value other than 'none' or a will-change value of filter (only works on Firefox).
4. contain/container