css学习笔记之包含块

学习来源：

http://www.cnblogs.com/fogwind/p/6017375.html

简单地说，对于普通元素来说，包含块就是块级父级元素，对于定位元素来说，包含块是定位父级。

float属性：

浮动元素的包含块是指其最近的块级祖先元素。

若不设置包含块的高度，包含块若浮动，则包含块会延伸，进而包含其所有后代浮动元素；若不设置包含块的宽度，包含块若浮动，则包含块宽度由后代浮动元素撑开

position属性：

1、relative或static，他的包含块是由最近的祖先块的内容区域（width属性和height属性确定的区域）创建的。

2、fixed，他的包含块由视口创建（连续媒体）或者由页面区域创建（paged media）。

3、absolute，他的包含块由最近的position不为static的祖先元素创建，具体创建方式如下：

           a. 如果创建包含块的祖先元素是行内元素，包含块的范围是这个祖先元素中的第一个和最后一个行内盒的padding box围起来的区域。

           b. 如果这个祖先元素不是行内元素，包含块的范围是这个祖先元素的内边距+width区域。如果没有找到这样的祖先元素，这个绝对定位的元素的包含块为初始包含块。