BFC

前端精選文摘：BFC 神奇背後的原理
小科普：到底什麼是 BFC、IFC、GFC 和 FFC

一：BFC (Block Formatting Context)定義

BFC 全稱 Block Formatting Context，翻譯塊級格式化上下文。BFC 能夠看做是隔離了的獨立容器（渲染區域），容器裏面的元素不會在佈局上影響到外面的元素，至關於創建一個隱形的邊界

前提：每一個渲染區域用formatting context表示，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。在正常流中的盒子要麼屬於塊級格式化上下文，要麼屬於內聯格式化上下文。

2、BFC 的產生

• 根元素；
• float屬性不爲none；
• position爲absolute或fixed；
• display爲inline-block, flex, 或者inline-flex；
• overflow不爲visible（可視的）；

3、特性

BFC（塊級格式化上下文）對塊級元素在渲染的過程當中遵循佈局的規則：
一、內部的Box會在垂直方向，一個接一個地放置。

二、Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。

三、BFC的區域不會與float box重疊。
四、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
五、計算BFC的高度時，浮動元素也參與計算。　

4、應用

一、margin 合併

下圖1 header和body之間出現較大間隙的緣由是：h1裏面有外邊距，和header的外邊距合併了

但給header構建一個BFC以後，外邊距就不合並了。剩下的一點間隙是body的margin。

把body的margin取消以後，間隙就消失了

總結：（1）構建BFC是阻止外邊距合併的方法之一(雖然加邊框和padding也能夠實現外邊距合併)

（2）使用overflow：hidden，超出內容會被隱藏，因此使用要慎重

二、contain float，包裹浮動元素
先設置li爲浮動，能夠發現nav的高度是沒有被撐開的。

當給nav造成一個bfc，nav的高度就被撐開了。計算BFC高度的時候，是包括浮動元素的

也能夠經過浮動，來造成BFC.但若是隻是爲了撐開父元素，設置浮動是很不明智的。