BFC是什么？BFC如何生成？

1.BFC（Block Formatting Context ）塊級(jí)格式化上下文。BFC是CSS里的一種規(guī)則。
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）本質(zhì)上根元素也會(huì)生成BFC。

BFC作用

• 當(dāng)同一個(gè)BFC中的兩個(gè)盒子同時(shí)具有相對(duì)方向的外邊距時(shí)，外邊距會(huì)發(fā)生疊加(Margin Collapse)，當(dāng)兄弟盒子的外邊距不一樣時(shí)，將以最大的那個(gè)外邊距為準(zhǔn)。

  
  
  

  同一BFC外邊距合并
  
  
  

  不同BFC外邊距不合并

• BFC清除浮動(dòng)：計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

  
  
  

  浮動(dòng)父容器塌陷
  
  
  

  BFC清除浮動(dòng)

• 根據(jù)BFC的區(qū)域不會(huì)與float box重疊，實(shí)現(xiàn)自適應(yīng)兩欄布局。

  
  
  

  自適應(yīng)兩欄布局

BFC解決父子關(guān)系外邊距合并的方法

父子關(guān)系外邊距合并

如上圖所示：邊距合并造成了，和我們預(yù)期的效果不一樣。即容器之間margin為20px，父容器內(nèi)部H1邊距為40px.

解決方法：

邊框法

內(nèi)邊距法

行內(nèi)塊法

浮動(dòng)法

利用BFC解決父子級(jí)外邊距合并的方法很多，但是相對(duì)應(yīng)的也會(huì)帶來(lái)一些影響，例如inline-block會(huì)導(dǎo)致收縮，縫隙，2.浮動(dòng)導(dǎo)致容器浮動(dòng)，
3.絕對(duì)定位導(dǎo)致脫離文檔流（注意只有absolute，和fixed有效，relative不會(huì)產(chǎn)生效果）。還有display為table等等。相對(duì)影響較小的方法是overflow:hidden,和overflow:auto，但是在對(duì)應(yīng)的場(chǎng)景下還會(huì)產(chǎn)生影響，例如需要下拉菜單時(shí)，就不應(yīng)該設(shè)置overflow:hidden。

選擇對(duì)場(chǎng)景影響最小的方案才是王道！

代碼

外邊距合并
外邊距不合并
父容器塌陷
父容器形成BFC清除浮動(dòng)
自適應(yīng)兩欄布局