BFC MDN文档

BFC是什么 ​

BFC是块级格式化上下文，BFC是管理和控制元素在页面上布局的一种机制

当元素包含一些CSS属性后，该元素会创建一个BFC，影响其内部元素的布局和排列方式。

如何创建BFC ​

文档根元素 html会创建一个BFC，除此之外，包含以下CSS属性也会创建BFC

1. float浮动
2. 绝对定位元素（包含fixed和sticky）
3. display为inline-block、table-*、flow-root、list-item

   display: block;不能创建BFC

4. overflow不为visible
5. flex items
6. 网格布局元素
7. 元素属性为 contain: layout, content, 或 strict
8. multicol containers
9. 元素属性 column-span 设置为 all

BFC布局规则 ​

1. BFC的内容包含在包含块内
2. 内部的盒子从包含块顶部开始，一个接一个垂直排列
3. 两个同胞盒子之间的垂直距离由margin决定
4. 相邻块级盒子之间的垂直margin会折叠
5. 每个盒子的左边缘与包含块的左边缘相接，对于浮动元素也是边缘对齐
6. 创建BFC的容器元素不会与同级的浮动元素发生重叠

应用场景 ​

通常情况下我们不会仅仅为了更改布局去创建新的BFC，而是为了解决特定的问题来创建BFC，比如定位和清除浮动

1. 包含内部浮动元素（也就是浮动元素不会溢出容器之外）
2. 排除外部浮动元素（利用BFC不会与同级浮动区域重叠的规则）
3. 抑制margin折叠（通过在BFC的内部创建新的BFC使得其中相邻盒子的margin不发生折叠）