BFC（Block formatting contexts）?

單從字義上看BFC是:塊級格式上下文 1. w3c規範中的BFC定義： 浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容建立新的BFC（塊級格式上下文）。

在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。

在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。

2. BFC的通俗理解： BFC是一個獨立的佈局環境，我們可以理解為一個容器（虛擬的），容器裡面物品的擺放是不受外界的影響的。

因此, BFC中的元素的佈局是不受外界的影響（我們往往可以利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）並且在一個BFC中，塊級容器與行內容器（行內容器由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。

-------------------------------------------------------------BFC 相關---------------------------------------------------------------------

對於BFC : 知識點分佈比較散, 但基本集中在浮動 \絕對定位\ margin collaspe (外邊距摺疊) 中

--------------------------------------------------------------example---------------------------------------------------------------------

圖1

圖1 就是通過浮動改變位置來變成我們想要的位置

圖2

而圖2就是描述變得多了,但看上去沒有剛才美觀了. 這是因為p標籤裡的內容受到浮動的影響, 因此上文提到可以通過建立BFC來消除浮動的影響 這裡我們用overflow:hidden就可以為p建立一個BFC (BFC內部元素不受外界影響)

圖3

圖3即為我們理想中的效果

------------------------------------------------------- ----- BFC 與 margin collaspe---------------------------------------------------------

在相鄰的容器 (可能是父子或者兄弟關係) 可能會因為兩個外邊距合併形成單獨的一個外邊距, 這種外邊距合併稱為外邊距摺疊.

外邊距摺疊必備條件:

**1.**必須是處於常規文件流（非float和絕對定位）的塊級盒子,並且處於同一個BFC當中。 **2.**沒有padding和border將他們分隔開 **3.**都屬於垂直方向上相鄰的外邊距，可以是下面任意一種情況: <1>元素的margin-top與其第一個常規文件流的子元素的margin-top <2>元素的margin-bottom與其下一個常規文件流的兄弟元素的margin-top <3> height為auto的元素的margin-bottom與其最後一個常規文件流的子元素的margin-bottom 高度為0並且最小高度也為0，不包含常規文件流的子元素，並且自身沒有建立新的BFC的元素的margin-top和 margin-bottom