BFC

概述

BFC 是 block formatting context 的缩写，中文翻译是块级格式化上下文。其渲染区域用 formatting context表示，它决定了其子元素将如何定位，以及和其它元素的关系和相互作用。在文档流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文。

常见的生成BFC的方法有以下几种：

1. 设置元素的 float 属性为 right 或 left
2. 设置元素的 overflow 属性为 hidden 或 auto
3. 设置元素的 position 属性为 absolute 或 fix 或 粘性定位
4. 设置元素的 display 属性为 flex 或 inline-block 或 inline-flex
5. html 根元素

作用

1. 包含浮动元素，清除浮动，解决容器高度坍塌问题（建议使用 clear 属性, 清除浮动）
2. 解决外边距合并问题
   1. 解决父子外边距合并；
   2. 解决在相邻盒子外边距合并问题：
      当盒子属性的 overflow 的值为 hidden 或 auto 并不能解决外边距合并的问题，相反 display 属性的值为 inline-block 或 float 的属性为 right 或 left 时可以解决边距合并的问题