摘要：最常見的有簡稱和簡稱。可以把它理解成是一個獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據布局規則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應布局布局

在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。

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 中才有， 這兒先不講了。

注：這里補充一些block-level box一些知識

w3.org中對塊級元素的定義

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘table’.

大意：塊級元素是那種源文檔被格式化為可視塊了的元素，然后使這個元素變成塊級元素的display屬性取值如下： ‘block’, ‘list-item’, 和 ‘table’。

Block-level boxes are boxes that participate in a block formatting context. Each block-level element generates a principal block-level box that contains descendant boxes and generated content and is also the box involved in any positioning scheme

大意：塊級盒block-level box是這種參與了塊級排版上下文的一種盒子，每個塊級元素都生成了一個包含后代盒子和生成的內容的主要塊級盒，并且這個盒子參與了任何定位的計算

block-level box 盒模型

block-level box特性

塊狀元素排斥其他元素與其位于同一行，可以設定元素的寬（width）和高（height），塊級元素一般是其他元素的容器，可容納塊級元素和行內元素。
塊狀元素具有流體特性，即：在默認情況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器

Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。

BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。

解釋：
BFC是 W3C CSS 2.1 規范中的一個概念，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照一定規則進行布局。一個環境中的元素不會影響到其它環境中的布局。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這里有點類似一個BFC就是一個獨立的行政單位的意思。也可以說BFC就是一個作用范圍。可以把它理解成是一個獨立的容器，并且這個容器的里box的布局，與這個容器外的毫不相干。
另一個通俗點的解釋是：在普通流中的 Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬于這兩者。并且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內框) 則在 inline formatting context(行內格式化上下文) 里格式化。任何被渲染的元素都屬于一個 box ，并且不是 block ，就是 inline 。即使是未被任何元素包裹的文本，根據不同的情況，也會屬于匿名的 block boxes 或者 inline boxes。所以上面的描述，即是把所有的元素劃分到對應的 formatting context 里。

canvas會設立一個BFC，這也是最外層的formatting context了，問題的復雜性在于有些塊級盒內部也可以產生BFC（至少它必須也能包含塊級盒），于是說BFC是可以嵌套。不是所有塊級盒內部都可以產生BFC，比如說要是這盒里面連塊級盒都沒有，都是行內盒那就產生IFC。不過，只要它的子節點里面有一個塊級盒，它就產生BFC，那些行內元素，會自動套一個匿名的塊級行盒。

內部的Box會在垂直方向，一個接一個地放置

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

每個元素的margin-box的左邊， 與包含塊border-box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

BFC的區域不會與float box重疊。

關于這條規則的幾點說明：
當容器有足夠的剩余空間容納 BFC 的寬度時，所有瀏覽器都會將 BFC 放置在浮動元素所在行的剩余空間內。 
當 BFC 的寬度大于容器剩余寬度時，最新版本的瀏覽中只有firefox會在同一行顯示，其它瀏覽器均換行。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

根元素

float屬性不為none

position為absolute或fixed

display為inline-block, table-cell, table-caption, flex, inline-flex

overflow不為visible

關于overflow:visible：
overflow:visible的塊盒就不產生BFC，不但不產生BFC，啥FC都不產生，它的子元素直接搞進自己外層的BFC鳥：：
overflow:visible這個限制只對所謂的塊盒（既包含塊級盒、自己又是塊級盒）存在，有些盒內部也能包含塊級元素，但是它本身又不是塊級元素（比如display為table-cell、inline-block、或者盒本身是flex item等），因為外面不是BFC，所以它們不論如何一定會給包含的塊級盒創建一個新的BFC出來。
關于浮動：
浮動是個行級的行為，當遇到浮動元素的時候，會首先"假裝"它是個行內元素進行排版，排好后就往浮動的方向擠到擠不過去為止（遇到邊界或者其它浮動元素）。
某一方向有clear的時候，浮動元素總是擠到邊界，在垂直方向上的行為類似"換行"。
排好一個浮動元素之后，這一行就要重排一次。所以說浮動元素會造成行級的reflow。重排的時候，行盒會躲開浮動元素。之后的塊級盒（不論是行盒還是其它盒）也都會躲開浮動元素排布。

代碼：

頁面：

根據BFC布局規則第3條：
每個元素的margin-box的左邊， 與包含塊border-box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。

因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。

根據BFC布局規則第四條：
BFC的區域不會與float box重疊。

我們可以通過通過觸發main生成BFC， 來實現自適應兩欄布局。

.main {
    overflow: hidden;
}

當觸發main生成BFC后，這個新的BFC不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：

頁面：

對比： 實現布局的另一種方式利用塊狀元素流體特性實現的自適應布局

利用塊狀元素流體特性實現的自適應布局
常用方法：浮動或者定位+margin撐開
不足之處：我們需要知道浮動或絕對定位內容的尺寸。然后，流體內容才能有對應的margin或padding或border值進行位置修正。

代碼：

頁面：

根據BFC布局規則第六條：
計算BFC的高度時，浮動元素也參與計算

為達到清除內部浮動，我們可以觸發par生成BFC，那么par在計算高度時，par內部的浮動元素child也會參與計算。

.par {
    overflow: hidden;
}

效果如下：

代碼：

    
Haha
    
Hehe

頁面：

兩個p之間的距離為100px，發送了margin重疊。

根據BFC布局規則第二條：
Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

我們可以在p外面包裹一層容器，并觸發該容器生成一個BFC。那么兩個P便不屬于同一個BFC，就不會發生margin重疊了。

代碼：

    
Haha
    

        
Hehe
    

效果如下:

以上的幾個例子都體現了BFC布局規則第五條：
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

因為BFC內部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

1.前端精選文摘：BFC 神奇背后的原理
2.CSS之BFC詳解
3.BFC 、IFC
4.CSS深入理解流體特性和BFC特性下多欄自適應布局
5.CSS布局