建立規則：

1. 根元素
2. 浮動元素（float不是none）
3. 絕對定位元素（position取值為absolute或fixed）
4. display取值為inline-block,table-cell, table-caption,flex, inline-flex之一的元素
5. overflow不是visible的元素

作用：

1. 可以包含浮動元素
2. 不被浮動元素覆蓋
3. 阻止父子元素的margin摺疊

display,float,position的關係

1. 如果display為none，那麼position和float都不起作用，這種情況下元素不產生框
2. 否則，如果position值為absolute或者fixed，框就是絕對定位的，float的計算值為none，display根據下面的表格進行調整。
3. 否則，如果float不是none，框是浮動的，display根據下表進行調整
4. 否則，如果元素是根元素，display根據下表進行調整
5. 其他情況下display的值為指定值 總結起來：絕對定位、浮動、根元素都需要調整display

外邊距摺疊 (collapsing margins)

毗鄰的兩個或多個margin會合併成一個margin，叫做外邊距摺疊。規則如下：

1. 兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會摺疊
2. 浮動元素/inline-block元素/絕對定位元素的margin不會和垂直方向上的其他元素的margin摺疊
3. 建立了塊級格式化上下文的元素，不會和它的子元素髮生margin摺疊
4. 元素自身的margin-bottom和margin-top相鄰時也會摺疊

如何確定一個元素的包含塊 (containing block)

1. 根元素的包含塊叫做初始包含塊，在連續媒體中他的尺寸與viewport相同並且anchored at the canvas origin；對於paged media，它的尺寸等於page area。初始包含塊的direction屬性與根元素相同。

2. position為relative或者static的元素，它的包含塊由最近的塊級（display為block,list-item, table）祖先元素的內容框組成

3. 如果元素position為fixed。對於連續媒體，它的包含塊為viewport；對於paged media，包含塊為page area

4. 如果元素position為absolute，它的包含塊由祖先元素中最近一個position為relative,absolute或者fixed的元素產生，規則如下：

5. • 如果祖先元素為行內元素，the containing block is the bounding box around the padding boxesof the first and the last inline boxes generated for that element.
   • 其他情況下包含塊由祖先節點的padding edge組成

6. 如果找不到定位的祖先元素，包含塊為初始包含塊

stacking context, 佈局規則

z軸上的預設層疊順序如下（從下到上）：

1. 根元素的邊界和背景
2. 常規流中的元素按照html中順序
3. 浮動塊
4. positioned元素按照html中出現順序

如何建立stacking context：

1. 根元素
2. z-index不為auto的定位元素
3. a flex item with a z-index value other than 'auto'
4. opacity小於1的元素
5. 在移動端webkit和chrome22+，z-index為auto，position: fixed也將建立新的stacking context