CSS層疊上下文與BFC

CSS中的層疊上下文和BFC是兩個很虛但極其重要的概念，影響到網頁佈局的方方面面。有幾篇博文講得很詳細，這裏稍加摘錄，便於記憶。

CSS層疊上下文

張鑫旭在深刻理解CSS中的層疊上下文和層疊順序裏有深刻的講解：

能夠建立層疊上下文的規則：

• z-index值不爲auto的flex項(父元素display:flex|inline-flex)
• 元素的opacity值不是1
• 元素的transform值不是none
• 元素mix-blend-mode值不是normal
• 元素的filter值不是none
• 元素的isolation值是isolate
• will-change指定的屬性值爲上面任意一個
• 元素的-webkit-overflow-scrolling設爲touch

須要注意的是：

• 若是層疊上下文元素不依賴z-index數值，則其層疊順序是z-index:auto，可當作z:index:0級別；
• 若是層疊上下文元素依賴z-index數值，則其層疊順序由z-index值決定。

BFC（Block Formatting Context）

夢想天空在BFC 神奇背後的原理裏解析得很到位：

BFC直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則：

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
• 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
• BFC的區域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算

哪些元素會生成BFC?

• 根元素
• float屬性不爲none
• position爲absolute或fixed
• display爲inline-block, table-cell, table-caption, flex, inline-flex其中的一項
• overflow爲auto，scroll或hidden

張鑫旭在博文CSS深刻理解流體特性和BFC特性下多欄自適應佈局裏面生動的講解了流媒體佈局、自適應佈局，推薦進一步閱讀。

清除浮動

推薦Micro Clearfix by Nicolas Gallagher

.container::before, .container::after {
    content:"";
    display:table;
}
.container::after {
    clear:both;
}
.container {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

注意，這裏display屬性block和table均有使用，區別是table會阻止（子元素與兄弟元素的）margins重疊，也就是建立了BFC，所以不可輕易互換。

例如對於此HTML結構：

<div class="box clearfix"></div>
<div class="clearfix">
        <div class="box"></div>
 </div>

若是爲block，兩個box之間的間距是100px；若是爲table，則是200px。

但若是這麼寫，兩種狀況下都是100px：

<div class="box clearfix"></div>
<div class="box clearfix"></div>

更多內容參考這裏的討論：http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use