BFC(Block Formatting Context)

BFC？

一种块级格式化环境
可以解决我们css块级塌陷与浮动问题

开启BFC特性：

开启BFC后，子元素的垂直边距不会传递给父元素。
开启BFC后，元素不会被浮动元素所覆盖
开启BFC后，元素可以包含浮动的子元素

创建BFC：

使用float 使其浮动的元素
绝对定位的元素 (包含 position: fixed 或position: sticky
使用以下属性的元素 display: inline-block
表格单元格或使用 display: table-cell, 包括使用 display: table-* 属性的所有表格单元格
表格标题或使用 display: table-caption 的元素
块级元素的 overflow 属性不为 visible
元素属性为 display: flow-root 或 display: flow-root list-item
元素属性为 contain: layout, content, 或 strict
flex items
网格布局元素
multicol containers
元素属性 column-span 设置为 all

使用BFC：

这是未添加的样式：

.box1 {
            width: 200px;
            height: 200px;
            background: tomato;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-top: 100px;
        }

效果为：

屏幕截图 2023-04-21 150937.png

由此我们可以看到它是距离窗口的位移而不是父级盒子的位移

那么我们开启BfC试一试：

使用经典用法 overflow: hidden; 或者 overflow: auto;

屏幕截图 2023-04-21 152243.png

可以看到它还是会有边距，自己设置一下：

        *{
            margin: 0;
            padding: 0;
        }

但是以上的 overflow,都会自动创建一个包含浮动的新 BFC，

使用 overflow的缺陷：

1.在某些创建新的 BFC 情况下，当您纯粹使用此属性创建 BFC 时，您会发现不需要的滚动条或剪切阴影。

那么当进行到后续需要时却不易查找，代码的可读性较差。
浮动元素的父元素触发BFC，形成独立的块级格式化上下文
浮动元素的父元素的高度是auto的

当BFC的高度是auto时，是根据如下方法计算高度的

如果只有inline-level，是行高的顶部和底部的距离。
如果block-level，是由最底层的块边缘和最底层的块级盒子的下边缘之间的距离。
如果有绝对定位元素，将会被忽略。
如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘。

推荐使用方法显示的创建BFC：display: flow-root

不会产生任何副作用（对现代浏览器来说）

-其他方法可以参考MDN

了解BFC

BFC(Block Formatting Context)

BFC？

使用BFC：