BFC相对于一个盒子，内部的元素与外界的元素互不干扰，它不会影响外部的布局，外部的布局也不会影响到它。
形成条件
- float的值不是none
- position的值不是static或者relative
- display的值是inline-block,table-cell,flex,table-caption或者inline-flex.
- overflow的值不是visible
特性
- 内部的盒子会在垂直方向上一个接一个地放置
- 对于同一个BFC的两个相邻的盒子的margin会发生重叠
- 每个元素的左外边距与包含块的左边界相接触
- BFC的区域不会与float的元素区域重叠
- 计算BFC的高度时，浮动子元素也参与计算
- BFC就是页面上的一个隔离的独立容器，不会影响外面的元素
应用场景
- 解决浮动子元素导致父元素高度坍塌的问题
- 解决文字环绕在float四周的情况
- 解决边距重叠的问题
