什么是BFC
BFC：格式化上下文（Block Formatting Context）
是一个独立的渲染区域。相当于一个独立的盒子，在这个盒子内部的布局不受外部影响，同样，内部内容也不会影响外部内容。
BFC规则
- BFC内部的盒子box会在垂直方向一个接一个的放置
- box垂直方向的距离由margin决定。属于同一个BFC的两个相邻的box的margin会发生重叠
- 每个元素的margin-left，与包含块border box的左边相接触（对于从左向右的格式化）
- BFC的区域不会与浮动盒子float box重叠
- BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到容器外的元素，反之一样
- 计算BFC高度时，浮动元素也参与计算
BFC触发
- 根元素（HTML就是根元素，整个HTML就是一个独立的BFC）
- float的值不为none
- overflow的值不为visible（hidden auto scroll）
- display的值为inline-block flex table-cell table-caption
- position的值为absolute fixed
BFC的应用
解决margin塌陷问题
即解决一个标准流中相邻的盒子之间垂直margin 的重叠问题。
由于BFC的布局不受外部元素的影响，所以为了使margin不重叠，将其中一个盒子触发BFC,这样就使其成为一个独立容器，不受外部影响。
解决高度塌陷问题
如果对某个盒子设置了浮动，使其脱离了标准流，但没有对父元素设置高度时，就会形成页面的塌陷，即父元素高度为0，子元素浮在标准流上方。
为了解决这个问题，可以将父元素触发BFC，由于在BFC当中，浮动的元素也参与盒子高度的计算，所以浮动元素也可以将父元素撑开，解决了塌陷问题
