css BFCBFC(block formatting context) 1. float && position fl

BFC(block formatting context)

1. float && position

float文字环绕效果
定位属性层级大于浮动属性
浮动，绝对定位、固定定位脱离文档流；浮动是标准流基础上加上新的一层，所有浮动元素依次显示于该层级，定位是层级依次叠加
position: absolute/fixed不能与float同时设置，属于不同的流（浮动流、定位流）；相对定位不受此限制，因为它依然占据文档流

<style>
    .b {
        background-color: rebeccapurple;
        width: 250px;
        height: 250px;
        top: 300px;
        float: left;
    }
    .a {
        width: 120px;
        height: 120px;
        background-color: red;
        float: left;
    }
    .f {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: relative;
    }
    .d {
        width: 300px;
        height: 300px;
        background: rgba(0, 0, 0, 0.2);
    }

</style>

<div class="b">
    <div class="a">red</div>
</div>
<div class="f">yellow</div>   // 文字环绕
<div class="d">black</div>    // 文字环绕

float&&position.png

2. 清除浮动

浮动元素无法撑起父元素的高度（导致父元素高度为0）

解决父元素高度塌陷问题

clear 属性清除浮动
触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素，例如 overflow:hidden

3. BFC

一个独立的块级渲染区域，使用一套渲染规则约束盒子的布局

渲染规则：

参与bfc高度计算的包含浮动子元素
隔离的独立容器，不影响外部
bfc区域不会与浮动元素区域重叠

触发条件：

html根元素
浮动元素（float ≠ none）
定位元素，position（absolute，fixed）
overflow(overflow ≠ visible)
display(inline-block、table-cell)
弹性元素、网格元素（flex 或 inline-flex 元素的直接子元素、grid 或 inline-grid 元素的直接子元素）
....................

用途：

(1) 清除内部浮动（包含内部浮动）

确切理解为浮动元素也是bfc, 父级元素设置bfc后，两个bfc之间互不影响

解决父元素塌陷问题，或者用于防止浮动造成的文字环绕效果

(2) 避免垂直外边距折叠效果

使用bfc: 垂直外边距相加

不使用bfc：垂直外边距取较大值

(3) 自适应多栏布局

4. 层叠上下文

(1) z-index

只针对定位元素

(2) 层叠上下文

html元素的三维构想（沿z轴排开），这些元素基于自身的属性按优先级顺序占据这个空间

触发条件：

html根元素
position:absolute/relative 且 z-index ≠ auto
弹性元素、网格元素且 z-index ≠ auto
opacity < 1
transform ≠ none
.....................

同一个层叠上下文中的层叠顺序：

层叠顺序.png

参考链接： css-bfc