1、BFC 是什么？如何生成 BFC？BFC 有什么作用？举例说明。
BFC即块级格式化上下文，它能将渲染区域用formatting context表示，决定了其子元素将如何定位，以及和其他元素的关系和相互作用；
生成BFC的方法：
1、根元素自动生成BFC；
2、float属性不为none的元素；
3、position为absolute或fixed；
4、display为inline-block，flex等；
5、overflow不为visible。
作用：某个区域生成一个BFC之后，就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，这样就能克服很多问题，如：
a、克服margin合并问题，同一个BFC内的相邻元素，子元素与父元素或祖先元素及元素本身都可能产生外边距合并的问题，这时，如果将BFC内的子元素也生成一个BFC，就能克服margin合并；
b、元素生成BFC之后，其不会再像普通元素一样与浮动元素产生重叠，另外给浮动元素生成BFC后，浮动元素会撑开父容器。
2、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
以下几种场景会出现外边距合并：
a、子元素与父元素或祖先元素之间合并，如：第一个子元素的margin-top会与父元素的margin-top合并，合并之后margin为父子元素margin中的较大值；
b、相邻元素之间合并，相邻元素之间，上面元素的margin-bottom会与下面元素的margin-top合并，合并之后两者之间的间距为两个margin中的较大值；
c、元素自身上下margin合并，如：一个元素内容为空时，为其设置margin后，其上下margin会合并。
相邻元素之间外边距合并无论是设置border、padding还是各自生成BFC都无法阻止外边距合并，最终合并成两者margin中的较大值，这种情况可以通过设置其中一个元素的margin为预期两者margin之和的方式来实现类似阻止边距合并的效果，但未在本质上解决外边距合并。
