以下內容翻譯自CSS 2.1官方文檔。網址：https://www.w3.org/TR/CSS2/visudet.html#strut
有時，一個元素的盒子的位置和尺寸根據一個確定的矩形計算，這個確定的矩形叫這個元素的包含塊。一個元素的包含塊根據以下規則確定：
1、根元素所在的包含塊叫初始包含塊 initial containing block。對於連續媒體設備（continuous media），初始包含塊的大小等於視口viewpor的大小，基點在畫布的原點（視口左上角）；對於分頁媒體（paged media），初始包含塊是頁面區域（page area）。初始包含塊的direction屬性與根元素的相同。
2、對於其他元素，如果元素的position屬性是relative或static，他的包含塊是由最近的祖先塊容器盒（block container ancestor box）的內容區域（content edge：width屬性和height屬性確定的區域）創建的。
3、如果一個元素的position屬性為fixed，他的包含塊由視口創建（連續媒體）或者由頁面區域創建（paged media）。
4、如果元素的position為absolute，他的包含塊由最近的position不為static的祖先元素創建，具體創建方式如下：
A.如果創建包含塊的祖先元素是行內元素（inline element），包含塊的范圍是這個祖先元素中的第一個和最后一個行內盒的padding box圍起來的區域。
B.如果這個祖先元素不是行內元素，包含塊的范圍是這個祖先元素的內邊距+width區域（padding edge）。
如果沒有找到這樣的祖先元素，這個絕對定位的元素的包含塊為初始包含塊。
下面的文檔中沒有定位的元素：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE>Illustration of containing blocks</TITLE> 5 </HEAD> 6 <BODY id="body"> 7 <DIV id="div1"> 8 <P id="p1">This is text in the first paragraph...</P> 9 <P id="p2">This is text <EM id="em1"> in the 10 <STRONG id="strong1">second</STRONG> paragraph.</EM></P> 11 </DIV> 12 </BODY> 13 </HTML>
包含塊的創建如下表：
| 元素 |
創建其包含塊的元素 |
| html |
視口（初始包含塊） |
| body |
html |
| div1 |
body |
| P1 |
div1 |
| P2 |
div1 |
| em1 |
P2 |
| strong1 |
P2 |
如果添加以下CSS規則：
1 #div1 { position: absolute; left: 50px; top: 50px } 2 #em1 { position: absolute; left: 100px; top: 100px }
包含塊的創建如下表：
| 元素 |
創建其包含塊的元素 |
| html |
initial C.B. (初始包含塊) |
| body |
html |
| div1 |
initial C.B. (初始包含塊) |
| p1 |
div1 |
| p2 |
div1 |
| em1 |
div1 |
| strong1 |
em1 |
相關文章：http://www.w3help.org/zh-cn/kb/008/