CSS定位之——什么是包含块？

一、包含块简单说就是定位参考框或者定位坐标参考系，元素一旦定义了定位显示（相对、绝对、固定）都具有包含块性质，它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

二、包含块是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。
三、原理：一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的，这个长方形就被称之为元素的 containing block。一个元素的 containing block 按以下方式定义：
1、用户代理选择根元素作为包含块（称之为初始 containing block）。
2、对于其它元素，除非元素使用的是绝对位置，包含块由最近的块级祖先元素盒子的内容边界组成。
3、如果元素有属性 'position:fixed'，包含块由视口建立。
4、如果元素有属性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步骤：
a、如果祖先是块级元素，由祖先的 padding edge 形成。
b、如果祖先是内联元素，取决于祖先的 direction 属性。
⑴如果 direction 是 ltr（左到右），祖先产生的第一个盒子的上、左内容边界是包含块的上方和左方，祖先的最后一个盒子的下、右内容边界是包含块的下方和右方。
⑵如果 direction 是 rtl（右到左），祖先产生的第一个盒子的上、右内容边界是包含块的上方和右方，祖先的最后一个盒子的下、左内容边界是包含块的下方和左方。
如果没有祖先，根元素盒子的内容边界确定为包含块。