概念了解
Block Formatting Context 块级格式化上下文（格式化=>初始化 上下文=>环境）
=>简单来说，就是把页面中的一块区域独立出来，这块区域有它自己的规则/环境，也不会影响到外面的元素。可以理解为在根元素内创建和根元素差不多环境的块框。
如何创建BFC？
- 根元素HTML
- float 除了none
- position:absolute/fixed
- display:inline-block、table-cells、flex、inline-flex(除了block)
- overflow:hidden、auto、scroll(除了visible)
BFC内部规则
- 块级盒子按垂直方向排列，垂直方向上的margin会合并（外边距折叠）
- 盒子靠左摆放
BFC独立特性
- 新创建BFC不再适应父元素的宽度，而是适应自身元素的宽度
- BFC区域会包含页面中同级的float元素(BFC方式不可以是float),从而阻止区域元素被float元素覆盖
- 不同BFC外边距不会折叠
BFC应用
- 避免某元素被浮动元素覆盖：
- 左侧固定、右侧宽高自适应布局=>左侧元素float:left、右侧元素overflow:hidden
- 去除外边距重叠现象
