一、BFC概念
BFC 即 Block Formatting Contexts (块级格式化上下文)
触发BFC的元素会被看作隔离了的容器。内部元素不会影响外面的元素。
二、触发BFC
触发条件：
1、body根元素（html）
2、浮动元素
3、绝对定位元素（包括fixed）
4、display为inline-block、table-cells、flex、table-captions
5、overflow除了visible以外的值（hidden、auto、scroll）
三、BFC特性
1、内部元素之间外边距会发生折叠
在垂直方向上两个相邻的boxes的间距由margin属性决定，这个margin会塌陷；
2、在块级格式化上下文中，每个盒子左外边界会触碰到容器盒子的左边界，即便是浮动的元素也是一样的，除非这个元素也创建了一个新的Block Formatting Context；
3、BFC可以清除浮动
1）BFC能包含浮动元素，就能解决容器高度不被撑开。
2）BFC能避免文字环绕，其包含着的元素也触发BFC就可以不环绕周围浮动元素。