CSS 包含块是标准布局中的一个重要概念，它是绝对定位的基础。请注意包含块与父元素、包含元素（包含框）等概念存在本质的区别。那么什么是包含块呢？
包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考。在默认状态下，body 元素就是一个大的包含块，所有绝对定位的元素都是根据窗口来确定自己所处的位置和百分比大小显示的。但是如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。
为了能够更直观地明白什么是包含块，以及上述阐释的内涵，下面我们来构建这样一个 XHTML 代码模块：
在上面的代码中，构建了两个包含元素，它们分别包含了一个元素。下面，我们用 CSS 定义这两个包含元素的大小为 200px *200px，并浮动在窗口的中间区域，CSS 代码如下：
同时，单独定义 b 包含元素为相对定位，确定它是一个包含块（如何确定一个包含块在本示例
的后面会详细说明）：
然后，定义两个被包含元素为绝对定位，大小为 50%*50%，并都偏移 50％，具体代码如下：
最后，分别为两个被包含元素定义不同背景颜色，以便于区别，则显示如图所示：
提示：您可以先修改部分代码再运行
在上图所示的演示效果中，被a 包含元素包含的 c 子元素，它根据窗口 body 元素的左上点为坐标原点进行绝对定位偏移，百分比大小取值也根据窗口的大小来确定，即为窗口宽度和高度的一半。
而b 包含元素被定义为相对定位，它就成为了一个包含块，因此被它包含的d 元素就会根据 b 元素的左上角为坐标原点进行绝对定位偏移，它的百分比大小取值也会根据b 元素的大小来确定，而不是以窗口为参照物。
上图是在 IE 6 浏览器中的预览效果，我们可以看到，对于坐标偏移解析方面，IE 6 与其他现代标准浏览器的解析效果是一致的，即a 包含元素内的c 元素根据最近包含块（窗口左上角）进行偏移，百分比偏移大小（50%）也是根据包含块大小（窗口大小）来确定的。
但是，在计算被包含元素自身大小时，IE 与标准存在很大的差异，IE 浏览器认为被包含元素c 的百分比高和宽应该根据XHTML 代码中包含它的元素的大小来确定，而不是它的最近包含块， 因此 c 元素显示大小就为 a 元素显示大小（200px*200px）的一半100px*100px 。
一般情况下，我们可以用 position 属性来定义任意包含块，position 属性有效取值包括 absolute、fixed、relative。
有了包含块，设计师就可以灵活设置绝对定位的坐标原点和它的参考值。绝对定位打破了元素的固有排列顺序，满足诸如内容优先的排版需要，也给复杂的浮动布局带来方便。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
