BFC ​

什么是 BFC ？ ​

BFC 是 Block Formatting Context （块级格式上下文）的缩写，它是一个独立的空间，里面的元素不是影响到外界元素的布局。
我的理解是它是类似 JS 的 Css 版的块级作用域，内部变量不会影响外界。

BFC 的作用？ ​

• 解决 margin 重叠问题
• 清除浮动（浮动会脱离文档流导致父级高度塌陷）

如何触发 BFC ？ ​

所谓触发，可以理解为如何实现 CSS 块级作用域，以清除浮动或 margin 塌陷

• overflow: 值不为 visible
• display: inline-block / flex / inline-flex/ grid / inline-grid / table-cell
• position: absolute / fixed
• float: 值不为 none
• display: flow-root 这是一个块级元素盒子，一个新的属性，用于创建 BFC

display: inline-block 触发 bfc 之前没注意过，默认相邻块级元素设置了宽度在一行显示时，如果设置了外边距，左右是会重叠的，但设置为 inline-block 等就形成了 bfc，不会重叠

display: block 左右边距重叠

display: inline-block 左右边距不会重叠