CSS 布阵基本盘 - BFC & SC

BFC （Block Formatting Context）

块级格式化上下文，个人的理解表现为块级元素的独立容器，是页面中的一块渲染区域，并且有一套渲染规则，直接决定了其子元素如何定位，以及与其他元素的关系和相互作用。

创建 BFC

记住常见的即可：

html
position: absolute/fixed
display: flex/grid/inline-block
float 不为 none
overflow 不为 visible/clip

BFC 特性

同一个 BFC 内的元素 margin 会发生重叠
BFC 元素会计算内部浮动元素高度
BFC 元素不会被兄弟浮动元素覆盖

对于特性 1，可以把 margin 重叠的元素分别放入不同的 BFC 中即可
利用特性 2，可以清除 BFC 中的浮动
利用特性 3，可以做自适应两/三栏布局

最新且完整的BFC见 MDN，

SC (stacking context)

打开网页能看到的所有元素都有一个在 Z 轴上的顺序等级，等级越高离人眼越近，不同元素的等级的比较必须要在同一个上下文中才有意义，这就是层叠上下文。

补充：父级 display: flex/inline-flex，具有 z-index != auto 的子元素(注意是子元素)也是层叠上下文。

其他一些最新的CSS3属性的影响可以参见 MDN

一道经典题

改动下方代码，让方框内显示红色。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .parent {
                position: relative;
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
            .child {
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: -1;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
            <div>我是文案</div>
        </div>
    </body>
</html>

其实就是把父元素变成层叠上下文即可，比如给 parent 加上 z-index: 0。

当 parent 不为层叠上下文时，它和child都处在根html层叠上下文中，此时：

parent 是普通元素，z-index 为 auto
child 是层叠上下文，z-index 为 -1，所以child在parent的下面，显示为黄色。

当 parent 为层叠上下文时，它和child都处在它自身的层叠上下文中，此时：

parent 是层叠上下文，它自身的 background/border 层叠顺序是最低的所以 child 的红色就得以显示出来了。

参考

深入理解 CSS 中的层叠上下文和层叠顺序