一、BFC的布局规则
BFC是一个独立的渲染区域，规定了块元素如何布局排版，有自己的布局规则。
1、定义块元素垂直排列、上下显示
2、上下盒子的margin会重叠
3、盒子左边的外边距和左边的边框会接触
4、BFC区域不会跟float区域重叠
5、每一个BFC都是独立的容器，相互之间不会影响
6、计算BFC高度时，浮动元素也参与高度计算。
二、BFC的触发条件
1、根元素（html）
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block，table-cell，table-caption，flex，inline-flex
5、overflow不为visible
三、BFC应用