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

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

Box是CSS布局的對(duì)象和基本單位， 直觀點(diǎn)來說，就是一個(gè)頁面是由很多個(gè) Box 組成的。元素的類型和 display 屬性，決定了這個(gè) Box 的類型。 不同類型的 Box， 會(huì)參與不同的 Formatting Context（一個(gè)決定如何渲染文檔的容器），因此Box內(nèi)的元素會(huì)以不同的方式渲染。讓我們看看有哪些盒子：

block-level box:display 屬性為 block, list-item, table 的元素，會(huì)生成 block-level box。并且參與 block fomatting context；

inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會(huì)生成 inline-level box。并且參與 inline formatting context；

run-in box: css3 中才有， 這兒先不講了。

注：這里補(bǔ)充一些block-level box一些知識(shí)

w3.org中對(duì)塊級(jí)元素的定義

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’.

大意：塊級(jí)元素是那種源文檔被格式化為可視塊了的元素，然后使這個(gè)元素變成塊級(jí)元素的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

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

block-level box 盒模型

block-level box特性

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

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

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

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

canvas會(huì)設(shè)立一個(gè)BFC，這也是最外層的formatting context了，問題的復(fù)雜性在于有些塊級(jí)盒內(nèi)部也可以產(chǎn)生BFC（至少它必須也能包含塊級(jí)盒），于是說BFC是可以嵌套。不是所有塊級(jí)盒內(nèi)部都可以產(chǎn)生BFC，比如說要是這盒里面連塊級(jí)盒都沒有，都是行內(nèi)盒那就產(chǎn)生IFC。不過，只要它的子節(jié)點(diǎn)里面有一個(gè)塊級(jí)盒，它就產(chǎn)生BFC，那些行內(nèi)元素，會(huì)自動(dòng)套一個(gè)匿名的塊級(jí)行盒。

內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置

Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

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

BFC的區(qū)域不會(huì)與float box重疊。

關(guān)于這條規(guī)則的幾點(diǎn)說明：
當(dāng)容器有足夠的剩余空間容納 BFC 的寬度時(shí)，所有瀏覽器都會(huì)將 BFC 放置在浮動(dòng)元素所在行的剩余空間內(nèi)。 
當(dāng) BFC 的寬度大于容器剩余寬度時(shí)，最新版本的瀏覽中只有firefox會(huì)在同一行顯示，其它瀏覽器均換行。

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

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

根元素

float屬性不為none

position為absolute或fixed

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

overflow不為visible

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

代碼：

頁面：

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

因此，雖然存在浮動(dòng)的元素aslide，但main的左邊依然會(huì)與包含塊的左邊相接觸。

根據(jù)BFC布局規(guī)則第四條：
BFC的區(qū)域不會(huì)與float box重疊。

我們可以通過通過觸發(fā)main生成BFC， 來實(shí)現(xiàn)自適應(yīng)兩欄布局。

.main {
    overflow: hidden;
}

當(dāng)觸發(fā)main生成BFC后，這個(gè)新的BFC不會(huì)與浮動(dòng)的aside重疊。因此會(huì)根據(jù)包含塊的寬度，和aside的寬度，自動(dòng)變窄。效果如下：

頁面：

對(duì)比： 實(shí)現(xiàn)布局的另一種方式利用塊狀元素流體特性實(shí)現(xiàn)的自適應(yīng)布局

利用塊狀元素流體特性實(shí)現(xiàn)的自適應(yīng)布局
常用方法：浮動(dòng)或者定位+margin撐開
不足之處：我們需要知道浮動(dòng)或絕對(duì)定位內(nèi)容的尺寸。然后，流體內(nèi)容才能有對(duì)應(yīng)的margin或padding或border值進(jìn)行位置修正。

代碼：

頁面：

根據(jù)BFC布局規(guī)則第六條：
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算

為達(dá)到清除內(nèi)部浮動(dòng)，我們可以觸發(fā)par生成BFC，那么par在計(jì)算高度時(shí)，par內(nèi)部的浮動(dòng)元素child也會(huì)參與計(jì)算。

.par {
    overflow: hidden;
}

效果如下：

代碼：

    
Haha
    
Hehe

頁面：

兩個(gè)p之間的距離為100px，發(fā)送了margin重疊。

根據(jù)BFC布局規(guī)則第二條：
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊

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

代碼：

    
Haha
    

        
Hehe
    

效果如下:

以上的幾個(gè)例子都體現(xiàn)了BFC布局規(guī)則第五條：
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

因?yàn)锽FC內(nèi)部的元素和外部的元素絕對(duì)不會(huì)互相影響，因此， 當(dāng)BFC外部存在浮動(dòng)時(shí)，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會(huì)通過變窄，而不與浮動(dòng)有重疊。同樣的，當(dāng)BFC內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，BFC計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免margin重疊也是這樣的一個(gè)道理。

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