浅谈CSS包含块Containing Block

CSS包含块（Containing Block）是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

包含块是定位参考框或定位坐标参考系，元素一旦定义了position定位（absolute或relative或fixed），它所包含的定位元素都将以该包含块为坐标系进行定位和调整。

用户代理（如浏览器）选择根元素(HTML/body)作为initial containing block（初始内容块）。

①　position: absolute：

找到其祖先元素中最近的position值不为static的元素，再判断：

a、若此元素为inline元素，则containing block 取决于祖先的 direction 属性。

1) 如果direction是 ltr（左到右），祖先产生的第一个盒子的上、左padding边界是containing block的上方和左方，祖先的最后一个盒子的下、右padding边界是containing block的下方和右方。

2) 如果direction是 rtl（右到左），祖先产生的第一个盒子的上、右padding边界是containing block的上方和右方，祖先的最后一个盒子的下、左padding边界是containing block的下方和左方。

b、若此元素为block元素，则containing block 由该祖先元素的 padding框构成。

c、如果都找不到，则containing block 为 initial containing block。

②　position: static或relative：

containing block 是它的父元素的内容框(即去掉padding的部分)。

③　position: fixed：

containing block为initial containing block。