BFC全稱"Block formatting Context"结窘，也叫塊級格式化上下文府阀。
CSS文檔里對BFC的描述
浮動渡冻，絕對定位元素砾赔，非塊盒的塊容器（inline-block,table-cells）和overflow不為visible的塊盒會為他們的內(nèi)容建立一個新的格式化上下文
在一個BFC中蔫骂，盒的數(shù)值方向一個接一個地放置么翰，從包含塊的頂部開始。兩兄弟盒之間的豎直距離由margin屬性決定纠吴。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并
在一個BFC中硬鞍，每個盒的left外邊（left outer edge）挨著包含塊的left邊。即使存在浮動戴已，這也成立。除非該盒建立新的BFC锅减。
MDN對BFC的描述
一個BFC由以下之一創(chuàng)建：
1糖儡，根元素或其它包含它的元素
2，浮動元素 (元素的 float 不是 none)
3怔匣，絕對定位元素 (元素具有 position 為 absolute 或 fixed)
4握联，內(nèi)聯(lián)塊 (元素具有 display: inline-block)
5，表格單元格 (元素具有 display: table-cell每瞒，HTML表格單元格默認屬性)
6金闽，表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
7，具有overflow 且值不是 visible 的塊元素剿骨，
8代芜，display: flow-root（css3）
9，column-span: all 應(yīng)當(dāng)總是會創(chuàng)建一個新的格式化上下文浓利，即便具有 column-span: all 的元素并不被包裹在一個多列容器中挤庇。
功能1：可以讓沒有被爸爸（父元素）包住的兒子（子元素）進入爸爸的懷抱
當(dāng)son元素浮動，dad元素包不住son元素贷掖，給dad元素加BFC包住浮動元素son
-
但是要注意的是嫡秕，日常工作不建議使用BFC來清除浮動，因為由于CSS不成交的特性苹威，加BFC可能會有附加的不希望出現(xiàn)的效果昆咽，而清除浮動clearfix可以完全替代BFC
ks8dXV.png
功能2：兄弟之間劃清界限
當(dāng)gg元素浮動時，可以看到gg是覆蓋在dd元素上邊的牙甫，給dd元素加BFC可以讓他們劃清界限
