文章轉(zhuǎn)載自：https://blog.csdn.net/qiu265843468/article/details/52789640
包含塊（Containing Block）是視覺格式化模型的一個重要概念，它與框模型類似亩进，也可以理解為一個矩形烦磁，而這個矩形的作用是為它里面包含的元素提供一個參考，元素的尺寸和位置的計算往往是由該元素所在的包含塊決定的。
包含塊簡單說就是定位參考框延届，或者定位坐標參考系消玄，元素一旦定義了定位顯示（相對、絕對撞芍、固定）都具有包含塊性質(zhì)秧了，它所包含的定位元素都將以該包含塊為坐標系進行定位和調(diào)整。
原理
一個元素盒子的位置和大小有時是通過相對于一個特定的長方形來計算的序无，這個長方形就被稱之為元素的 containing block验毡。一個元素的 containing block 按以下方式定義：
用戶代理（比如瀏覽器）選擇根元素作為 containing block（稱之為初始 containing block）。
對于其它元素帝嗡，除非元素使用的是絕對位置晶通，containing block 由最近的塊級祖先元素盒子的內(nèi)容邊界組成。
如果元素有屬性 'position:fixed'哟玷，containing block 由視口建立狮辽。
如果元素有屬性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步驟：
如果祖先是塊級元素隘竭，containing block 由祖先的padding edge形成塘秦。
如果祖先是內(nèi)聯(lián)元素，containing block 取決于祖先的 direction 屬性动看。
如果 direction 是 ltr（左到右）尊剔，祖先產(chǎn)生的第一個盒子的上、左內(nèi)容邊界是 containing block 的上方和左方菱皆，祖先的最后一個盒子的下须误、右內(nèi)容邊界是 containing block 的下方和右方。
如果 direction 是 rtl（右到左）仇轻，祖先產(chǎn)生的第一個盒子的上京痢、右內(nèi)容邊界是 containing block 的上方和右方，祖先的最后一個盒子的下篷店、左內(nèi)容邊界是 containing block 的下方和左方祭椰。
如果沒有祖先，根元素盒子的內(nèi)容邊界確定為 containing block疲陕。
例子
<HTML>
?? <HEAD>
????? <TITLE>Illustration of containing blocks</TITLE>
?? </HEAD>
?? <BODY id="body">
????? <DIV id="div1">
????? <P id="p1">This is text in the first paragraph…</P>
????? <P id="p2">This is text <EM id="em1"> in the?
????? <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
????? </DIV>
?? </BODY>
</HTML>
Illustration of containing blocks
沒有指定 position方淤，上方的代碼的 containing blocks (C.B.) 確定方式如下：
產(chǎn)生盒子的元素? ? ? ? ? ? ? ? ? ? ? ? ? ? 其 C.B. 為
body? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? initial C.B. (UA-dependent)
div1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? body
p1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?div1
p2? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?div1
em1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?p2
strong1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? p2
如果我們設(shè)置 div1 的 position：
#div1 { position: absolute; left: 50px; top: 50px }
div1 的 containing block 就不再是 body，它變成了初始 containing block（因為這里還沒有具有 position 的祖先盒子）蹄殃。
如果我們按如下方式放置 em1：
#div1 { position: absolute; left: 50px; top: 50px }
#em1? { position: absolute; left: 100px; top: 100px }
containing blocks 變成如下：
產(chǎn)生盒子的元素? ? ? ? ? ? ? ? ? ? ?其 C.B. 為
body? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?initial C.B.
div1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? initial C.B.
p1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? div1
p2? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? div1
em1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?div1
strong1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? em1
通過放置 em1携茂，它的 containing block 變成了最近的具有 position 的祖先盒子（也就是：div1）。
名詞解釋
根元素－源文件中诅岩，每一個元素都有一個父元素讳苦，只有一個例外，它就是根元素吩谦。
視口－通過解析文檔鸳谜，連續(xù)媒體（比如屏幕就是連續(xù)媒體，而打印機則是基于頁的媒體）給用戶產(chǎn)生一個視口（一個窗口或其它在屏幕上顯示的區(qū)域）逮京。
