什么是BFC
- Block Formatting Context(BFC) 块格式化上下文
他决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系
块级元素：父级（是一个块元素）
内容：子元素（是一个块元素）
其他元素： 与内容同级别的兄弟元素
相互作用： BFC里的元素与外面的元素不会发生影响
触发条件
触发BFC的方式（以下任意一条就可以）
- float的值不为none(可能的值left, right, none, inherit, 默认为none)
- overflow的值不为visible(可能的值visible, auto, hidden, scroll, inherit)
- display的值为table-cell、table-caption和inline-block之一(inline-block:行内块元素;table-caption:此元素作为一个表格标题显示(类似<caption>);table-cell:此元素作为一个表格单元格显示(类似<td>和<th>))
- 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
- 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
- position的值是absolute或fixed(可能的值absolute绝对定位,fixed固定定位,relative相对定位，static默认值没有定位，inherit从父元素继承position的值，默认z-index的值是0)
- 根元素(<html>)
- display 值为 flow-root 的元素(这个属性很不错)
- The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents
- 等，可以查看下面的参考文章，这些基本够日常开发用
BFC布局和普通文档流布局的区别
普通文档流
- 浮动的元素不会撑起父元素的高度
- 第一个不脱离文档里的元素margin-top会传递给父元素(margin塌陷)
BFC布局文档流
- 浮动元素会撑起父元素的高度
- 不会造成margin塌陷
