BFC和SC

把這兩個放在一篇文章裡是因為這兩個東西都叫上下文，那咱就一鍋炖了_!

BFC - block formatting context

個人了解：獨立容器

形成條件

• 根元素
• display：flex、inline-block、table-cell
• position：absolute、fixed
• float 不為 none
• overflow 不為 visible

特性

先說下個人的了解吧：BFC 其實就是一個密閉的空間，不受其它元素影響，也不會影響其它元素

1. BFC 内普通元素是垂直排列的，上下 margin 會發生重疊，與 BFC 的 border 相接觸
2. BFC 會計算浮動元素的高度
3. BFC 不會與浮動元素發生重疊
4. BFC 是獨立容器，不會與外界産生反應

作用

1. 如果 margin 發生了重疊，可以利用特性 4，将發生重疊的元素放到不同的 BFC 中即可避免 margin 重疊問題
2. 發生了高度塌陷，将父元素變為 BFC 即可
3. 利用特性 3 可以實作兩三欄布局

<!-- css -->
<style>
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: yellow;
    }
    .right {
        float: right;
        width: 100px;
        height: 100%;
        background-color: red;
    }
    .center {
        height: 100%;
        background-color: green;
        overflow: hidden;
    }
</style>
<!-- dom結構 center在最後 -->
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
           

可以和三欄常見布局聖杯、雙飛翼、flex作對比，雖然我現在基本都是用 flex

SC - stacking context

個人了解：控制 z 軸上元素的顯示順序

形成條件

1. 根元素
2. position 不為 static，并且設定了

   z-index 為數值

   的元素
3. 一些 css3 中的新屬性

第三點包括:

1. z-index 不為 auto 的 flex 項(flex 子元素)
2. opacity 不為 1
3. transform 不為 none
4. filter 不為 none
5. -webkit-overflow-scrolling 為 touch 等等
6. mix-blend-mode 不為 normal
7. isolation 為 isolate
8. will-change

層疊等級

其實我也不知道為啥非要整出這麼多概念…決定了

同一個層疊上下文中

元素在 z 軸上的顯示順序。

常見會産生層疊上下文的情況:

1. 根元素html
2. position不為static, 并且設定z-index
3. display為flex,子元素z-index不為auto,子元素為層疊上下文
4. opatic不為1
5. transform不為none

這裡的重中之中就是同一層疊上下文中比較才有意義

層疊順序

參考

• 深入了解 CSS 中的層疊上下文和層疊順序
• 徹底搞懂 CSS 層疊上下文、層疊等級、層疊順序、z-index