BFC定义
BFC（Block formatting context）块级格式化上下文
是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流
是一个独立的布局环境
产生BFC的条件
display属性为block,list-item,table的元素，会产生BFC
触发BFC的条件
- 浮动元素，float 除 none 以外的值；
- position为absolute或fixed
- display为inline-block,table-cell,table-caption,flex,inline-flex
- overflow不为visible
BFC的特性：
- 内部的Box会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定
- bfc的区域不会与float的元素区域重叠。
- 计算bfc的高度时，浮动元素也参与计算
- bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
BFC的用途：
- 清楚元素内部浮动
- 解决外边距合并问题
- 制作右侧自适应盒子问题
