外边距塌陷——BFC的布局规则及解决方案
BFC全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。
BFC的规则或者说是特点
1.独立且隔离的一个区域
2.里面的盒子垂直排列
3.属于同一个BFC相邻的俩个盒子（父子关系 相邻的兄弟关系）会有内边距重叠
4.BFC的区域不会与float重叠；
5.计算BFC的高度时，浮动元素也参与计算。
创建BFC（解决方案）：
1、position的值不是static或者relative。 2、float的值不是none。 3、display的值是inline-block、flex。 4、overflow的值不是visible。 1、给父元素加边框border 2、给父元素加内边距padding 3、给父元素加overflow:hidden
