1、BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明。

BFC即塊級(jí)格式化上下文，它能將渲染區(qū)域用formatting context表示，決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用；

生成BFC的方法：

1、根元素自動(dòng)生成BFC；

2、float屬性不為none的元素；

3、position為absolute或fixed；

4、display為inline-block，flex等；

5、overflow不為visible。

作用：某個(gè)區(qū)域生成一個(gè)BFC之后，就是頁面上一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素，這樣就能克服很多問題，如：

a、克服margin合并問題，同一個(gè)BFC內(nèi)的相鄰元素，子元素與父元素或祖先元素及元素本身都可能產(chǎn)生外邊距合并的問題，這時(shí)，如果將BFC內(nèi)的子元素也生成一個(gè)BFC，就能克服margin合并；

b、元素生成BFC之后，其不會(huì)再像普通元素一樣與浮動(dòng)元素產(chǎn)生重疊，另外給浮動(dòng)元素生成BFC后，浮動(dòng)元素會(huì)撐開父容器。

2、在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？

以下幾種場景會(huì)出現(xiàn)外邊距合并：

a、子元素與父元素或祖先元素之間合并，如：第一個(gè)子元素的margin-top會(huì)與父元素的margin-top合并，合并之后margin為父子元素margin中的較大值；

b、相鄰元素之間合并，相鄰元素之間，上面元素的margin-bottom會(huì)與下面元素的margin-top合并，合并之后兩者之間的間距為兩個(gè)margin中的較大值；

c、元素自身上下margin合并，如：一個(gè)元素內(nèi)容為空時(shí)，為其設(shè)置margin后，其上下margin會(huì)合并。

相鄰元素之間外邊距合并無論是設(shè)置border、padding還是各自生成BFC都無法阻止外邊距合并，最終合并成兩者margin中的較大值，這種情況可以通過設(shè)置其中一個(gè)元素的margin為預(yù)期兩者margin之和的方式來實(shí)現(xiàn)類似阻止邊距合并的效果，但未在本質(zhì)上解決外邊距合并。