什么是包含块？
MDN 定义：一个元素的尺寸和位置经常受其 包含块（containing block）的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区域，但也不是总是这样
包含块（containing block）就是元素用来计算和定位一个的框。如：width: 50%，那到底是哪个 “元素” 宽度的一半呢？其实，这个 “元素” 实际上就是指的包含块
包含块的影响
元素的尺寸及位置，常常会受它的包含块所影响。对于一些属性，例如 width、height、padding、margin，绝对定位元素的偏移值 position 被设置为 absolute 或 fixed，当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。
确定包含块
确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：
元素如果未声明 position 特性，那么就会采用 position 的默认值 static
如果没有找到符合条件的祖先元素则包含块是 “初始化包含块”
备注： 根元素
<html>所在的包含块是一个被称为 初始包含块 的矩形。其尺寸等同于浏览器可视窗口大小
- 如果 position 属性为
static、relative或sticky，包含块可能由它的最近的祖先块元素（比如说 inline-block, block 或 list-item 元素）的内容区的边缘组成，也可能会建立格式化上下文 (比如说 a table container, flex container, grid container, 或者是 the block container 自身)。 - 如果 position 属性为
absolute，包含块就是由它的最近的 position 的值不是static（也就是值为fixed,absolute,relative或sticky）的祖先元素的内边距区的边缘组成。 - 如果 position 属性是
fixed，则包含块是 “初始化包含块” - 如果 position 属性是
absolute或fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
- transform 或 perspective 的值不是
none - will-change 的值是
transform或perspective - filter 的值不是
none或will-change的值是filter（只在 Firefox 下生效） - contain 的值是
layout、paint、strict或content（例如：contain: paint;） - backdrop-filte 的值不是
none（例如：backdrop-filter: blur(10px);）
备注： perspective 和 filter 属性对形成包含块的作用存在浏览器之间的不一致性
根据包含块计算百分值
如上所述，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：
- 要计算
height、top及bottom中的百分值，是通过包含块的height的值。如果包含块的height值会根据它的内容变化，而且包含块的position属性的值被赋予relative或static，那么，这些值的计算值为auto - 要计算
width、left、right、padding、margin这些属性由包含块的width属性的值来计算它的百分值
