BFC - Block Formatting Context ：块级格式化上下文
1.触发BFC常见的具体情况
1.根元素(<html>)
2.元素浮动(float值不是none)
3.定位的元素(position的值是absolute/fixed)
4.overflow的值不是visible的块级元素
5.弹性盒子(display的值是flex)
6.行内块元素(display的值是inline-block)
2.BFC的作用：
1.在BFC中，box会在垂直方向上一个紧挨着一个进行排列
2.垂直方向的距离由margin的值来决定
3.在同一个BFC中，垂直方向上相邻的两个盒子的margin会发生折叠
BFC解决的具体问题
1.解决margin的折叠问题
创建一个新的BFC，使两个盒子不在同一个BFC中，则可以使margin不发生折叠
2.解决浮动元素高度塌陷的问题
