BFC是什么？BFC如何生成？
1.BFC（Block Formatting Context ）块级格式化上下文。BFC是CSS里的一种规则。
2.生成BFC的方法：1）display：flex，display：inline-block，dispaly：inline-flex，display：table-cell，display：table-caption。 这几种中的任意一种。2）position为fixed或absolute。 3）overflow不为visible。4）本质上根元素也会生成BFC。
BFC作用
-
当同一个BFC中的两个盒子同时具有相对方向的外边距时，外边距会发生叠加(Margin Collapse)，当兄弟盒子的外边距不一样时，将以最大的那个外边距为准。
同一BFC外边距合并
不同BFC外边距不合并 -
BFC清除浮动：计算BFC的高度时，浮动元素也参与计算
浮动父容器塌陷
BFC清除浮动 -
根据BFC的区域不会与float box重叠，实现自适应两栏布局。
自适应两栏布局
BFC解决父子关系外边距合并的方法
父子关系外边距合并
如上图所示：边距合并造成了，和我们预期的效果不一样。即容器之间margin为20px，父容器内部H1边距为40px.
解决方法：
边框法
内边距法
行内块法
浮动法
利用BFC解决父子级外边距合并的方法很多，但是相对应的也会带来一些影响，例如inline-block会导致收缩，缝隙，2.浮动导致容器浮动，
3.绝对定位导致脱离文档流（注意只有absolute，和fixed有效，relative不会产生效果）。还有display为table等等。相对影响较小的方法是overflow:hidden,和overflow:auto，但是在对应的场景下还会产生影响，例如需要下拉菜单时，就不应该设置overflow:hidden。
选择对场景影响最小的方案才是王道！
