一、什么是containing block
Containing block，翻译成中文也就是包含块，在CSS的visual formatting model（可视化模型）中是个很重要的概念，因为盒子的宽度/高度的自动值/相对值的计算，相对/浮动/绝对定位，都要依赖containing block。
二、如何判断盒子的containing block
containing block的判定很重要，熟悉理解了各种position下盒子的containing block，可以方便我们更快速的布局。一图胜千言，理解了下面这张图，关于containing block基本也理解透彻了。
（图片来自http://w3help.org/zh-cn/kb/008/）
下面分类说明：
根元素
根元素，是处于文档树顶端的元素，在（X）HTMl中，根元素就是html元素，它没有父节点。
根元素的包含块，叫做initial containing block（初始包含块），它的direction属性与html元素一致，它的尺寸与定位与VIewport一致（一致但并不等同），而Viewport尺寸固定为浏览器的工作区域尺寸 - 垂直/水平滚动条尺寸。（更详细的解释参考http://www.cnblogs.com/fsjohnhuang/p/5295859.html）
静态定位元素和相对定位元素
position为relative或者static的元素（未声明position的元素默认为static），它的包含块由它最近的块级、单元格（table cell）或者行内框（inline-block）祖先元素的内容框（content box）创建。
固定定位元素
固定定位（fixed）的元素，它的包含块是当前可视窗口。
绝对定位元素
总的来说，绝对定位（absolute）元素的包含块由离它最近的position为非static的祖先元素创建，根据情况可分类：
1.如果没有非static祖先元素，那么它的containing block就是initial containing block（初始包含块）。
2.存在非static祖先元素，且祖先元素为行内元素，则
此条内容图例解释可参考http://w3help.org/zh-cn/kb/008/
3.祖先元素不是行内元素，那么包含块的的区域是祖先元素的内边距边界（padding edges）
三、最后
总结本文参考了以下几篇文章：
containing block http://www.cnblogs.com/chengzhenping/p/3488107.html
KB008: 包含块( Containing block ) http://w3help.org/zh-cn/kb/008/
CSS魔法堂：不得不说的Containing Block http://www.cnblogs.com/fsjohnhuang/p/5295859.html
感谢前人栽阴！