BFC块级格式化上下文（Block Formatting Context）的缩写，是web页面渲染的重要概念
BFC是一个独立的渲染区域，其中的元素布局是相互独立的，不会影响到外部元素
触发BFC的5种方式
- 根元素或包含根元素的元素
- 浮动元素(float 不为 none）
- 绝对定位元素（position 为 absolute 或 fixed）
- display 为 inline-block 、table-cell 、 table-caption.flex、 inline-flex之一的元素
- overflow 不为visible的块级元素
BFC主要解决的问题：避免高度塌陷、防止margin重叠
- 避免高度塌陷
- 在一个元素内部包含浮动元素时，浮动元素会脱离文档流，导致父元素高度塌陷。触发父元素的BFC可以避免高度塌陷的问题，使得父元素的高度能够正确地包含浮动元素
- 防止margin重叠
- 当两个元素相邻且margin值相同时，它的margin值会重叠在一起，从而导致间距不符合预期，触发元素的BFC可以避免margin重叠问题。
