BFC是什么泪电？BFC如何生成？
1.BFC（Block Formatting Context ）塊級格式化上下文府树。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ì)上根元素也會生成BFC倍宾。
BFC作用
-
當(dāng)同一個BFC中的兩個盒子同時具有相對方向的外邊距時，外邊距會發(fā)生疊加(Margin Collapse)胜嗓，當(dāng)兄弟盒子的外邊距不一樣時高职，將以最大的那個外邊距為準(zhǔn)。
同一BFC外邊距合并
不同BFC外邊距不合并 -
BFC清除浮動：計算BFC的高度時辞州，浮動元素也參與計算
浮動父容器塌陷
BFC清除浮動 -
根據(jù)BFC的區(qū)域不會與float box重疊怔锌，實現(xiàn)自適應(yīng)兩欄布局。
自適應(yīng)兩欄布局
BFC解決父子關(guān)系外邊距合并的方法
如上圖所示：邊距合并造成了，和我們預(yù)期的效果不一樣埃元。即容器之間margin為20px涝涤，父容器內(nèi)部H1邊距為40px.
解決方法：
利用BFC解決父子級外邊距合并的方法很多，但是相對應(yīng)的也會帶來一些影響亚情，例如inline-block會導(dǎo)致收縮妄痪，縫隙，2.浮動導(dǎo)致容器浮動楞件，
3.絕對定位導(dǎo)致脫離文檔流（注意只有absolute衫生，和fixed有效，relative不會產(chǎn)生效果）土浸。還有display為table等等罪针。相對影響較小的方法是overflow:hidden,和overflow:auto，但是在對應(yīng)的場景下還會產(chǎn)生影響黄伊，例如需要下拉菜單時泪酱，就不應(yīng)該設(shè)置overflow:hidden。
選擇對場景影響最小的方案才是王道还最！
