BFC 定義
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區(qū)域箫锤，只有Block-level box參與贬蛙， 它規(guī)定了內部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干谚攒。
在解釋什么是BFC之前阳准，我們需要先知道Box、Formatting Context的概念馏臭。
Box：css布局的基本單位
Box 是 CSS 布局的對象和基本單位野蝇， 直觀點來說，就是一個頁面是由很多個 Box 組成的括儒。元素的類型和 display 屬性绕沈，決定了這個 Box 的類型。 不同類型的 Box帮寻， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器）乍狐，因此Box內的元素會以不同的方式渲染。讓我們看看有哪些盒子：
block-level box:display 屬性為 block, list-item, table 的元素固逗，會生成 block-level box浅蚪。并且參與 block fomatting context；
inline-level box:display 屬性為 inline, inline-block, inline-table 的元素烫罩，會生成 inline-level box惜傲。并且參與 inline formatting context；
run-in box: css3 中才有贝攒， 這兒先不講了操漠。
Formatting Context
Formatting context 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域饿这，并且有一套渲染規(guī)則浊伙，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用长捧。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)嚣鄙。
BFC是一個獨立的布局環(huán)境，其中的元素布局是不受外界的影響串结，并且在一個BFC中哑子，塊盒與行盒（行盒由一行中所有的內聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。
BFC的布局規(guī)則
內部的Box會在垂直方向帐要，一個接一個地放置榨惠。
Box垂直方向的距離由margin決定盛霎。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊愤炸。
每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化凤薛，否則相反)诞仓。即使存在浮動也是如此担巩。
BFC的區(qū)域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素屡萤。反之也如此掸宛。
計算BFC的高度時，浮動元素也參與計算措译。
怎么觸發(fā)形成BFC
根元素
絕對定位元素（position:absolute; position: fixed）
浮動元素（float:left; float: right;）
overflow不為默認值visible
行內塊元素（display:inline-block）
表格單元格（display: table-cell)
表格標題（display: table-caption)
匿名表格單元格元素（元素的 display 為 table饰序、table-row、 table-row-group求豫、table-header-group、table-footer-group（分別是HTML table最疆、row、tbody服爷、thead蚊逢、tfoot 的默認屬性）或 inline-table）
display值為flow-root
contain 值為 layout烙荷、content 或 paint 的元素
彈性元素（display: flex 或 inline-flex)
網格元素（display: grid 或 inline-grid)
BFC的特點
解決父子元素margin collapsing（外邊距重疊）的問題终抽；
包含浮動元素昼伴；
同層元素不和浮動元素重疊。
自適應兩欄布局
總結：
BFC就是頁面上的一個隔離的獨立容器价涝，容器里面的子元素不會影響到外面的元素色瘩。反之也如此逸寓。
因為BFC內部的元素和外部的元素絕對不會互相影響竹伸，因此泥栖， 當BFC外部存在浮動時，它不應該影響B(tài)FC內部Box的布局勋篓，BFC會通過變窄，而不與浮動有重疊譬嚣。同樣的，當BFC內部有浮動時孤荣，為了不影響外部元素的布局甸陌，BFC計算高度時會包括浮動的高度钱豁。避免margin重疊也是這樣的一個道理。
