本文講了bfc的概念是什麼； bfc的約束規則；咋樣才能觸發生成新的bfc；bfc在布局中的應用：防止margin重疊(塌陷,以最大的為準)； 清除內部浮動；自適應兩（多）欄布局。
1. bfc是什麼？
block fomatting context = block-level box + formatting context
box:
box即盒子模型；
display屬性為block, list-item, table的元素，會生成block-level box；並且參與 block fomatting context；
display 屬性為 inline, inline-block, inline-table的元素，會生成inline-level box。並且參與 inline formatting context；
formatting context
formatting context是w3c css2.1規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係、相互作用。最常見的 formatting context 有 block fomatting context (簡稱bfc)和 inline formatting context(簡稱ifc)。
css2.1 中只有bfc和ifc, css3中還增加了g（grid）fc和f(flex)fc。
bfc定義
bfc(block formatting context)直譯為"塊級格式化上下文"。它是乙個獨立的渲染區域，只有block-level box參與， 它規定了內部的block-level box如何布局，並且與這個區域外部毫不相干。
2.bfc的生成
上文提到bfc是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大，這些由生成bfc的元素決定，css2.1中規定滿足下列css宣告之一的元素便會生成bfc。
display：table也認為可以生成bfc，其實這裡的主要原因在於table會預設生成乙個匿名的table-cell，正是這個匿名的table-cell生成了bfc
3. bfc的約束規則
看到以上的幾條約束，想想我們學習css時的幾條規則
4. bfc在布局中的應用
4.1防止margin重疊（塌陷）：
兩個相鄰box垂直方向margin重疊
兩個p之間的距離為100px，傳送了margin重疊（塌陷），以最大的為準，如果第乙個p的margin為80的話，兩個p之間的距離還是100，以最大的為準。
根據bfc布局規則第二條：
box垂直方向的距離由margin決定。屬於同乙個bfc(上例中是body根元素的bfc)的兩個相鄰box的margin會發生重疊
我們可以在p外面包裹一層容器，並觸發該容器生成乙個新bfc。那麼兩個p便不屬於同乙個bfc，就不會發生margin重疊了。
相鄰box水平方向margin重疊
可以看到水平方向的margin發生了重疊。
我們可以給div加個display:inline-block，觸每個div容器生成乙個bfc。那麼三個div便不屬於同乙個bfc（這個只body根元素形成的bfc），就不會發生margin重疊了。
巢狀元素的margin重疊
此時div與ul之間的垂直距離，取div、ul、li三者之間的最大外邊距。
要阻止巢狀元素的margin重疊，只需讓ul生成bfc即可（將上例中的注釋去掉），這樣div、ul、li之間便不會發生重疊現象。
而li位於同一bfc內所以仍然存在重疊現象。
給li設定line-block重新生成乙個bfc就不存在重疊現象了。
需要注意的是：
如果為ul設定了border或padding，那元素的margin便會被包含在父元素的盒式模型內，不會與外部div重疊。
《css權威指南》中提到塊級正常流元素的高度設定為auto，而且只有塊級子元素，其預設高度將是從最高塊級子元素的外邊框邊界到最低塊級子元素外邊框邊界之間的距離。如果塊級元素右上內邊距或下內邊距，或者有上邊框或下邊框，其高度是從其最高子元素的上外邊距邊界到其最低子元素的下外邊距邊界之間的距離。
4.2清除內部浮動
頁面：根據bfc布局規則第六條：
計算bfc的高度時，浮動元素也參與計算
為達到清除內部浮動，我們可以觸發par生成bfc，那麼par在計算高度時，par內部的浮動元素child也會參與計算。
.par
4.3自適應多欄布局的
4.3.1自適應兩欄布局
根據bfc布局規則第3條：
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
因此，雖然存在浮動的元素aslide，但main的左邊依然會與包含塊的左邊相接觸。
根據bfc布局規則第四條：
bfc的區域不會與float box重疊。
我們可以通過通過觸發main生成bfc， 來實現自適應兩欄布局。
.main
當觸發main生成bfc後，這個新的bfc不會與浮動的aside重疊。因此會根據包含塊的寬度，和aside的寬度，自動變窄。效果如下：
4.3.2自適應兩欄布局
.left
.right
.center這種布局的特點在於左右兩欄寬度固定，中間欄可以根據瀏覽器寬度自適應。
4.總結
其實以上的幾個例子都體現了bfc布局規則第五條：
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
因為bfc內部的元素和外部的元素絕對不會互相影響，因此，
當bfc外部存在浮動時，它不應該影響bfc內部box的布局，bfc會通過變窄，而不與浮動有重疊。 同樣的，當bfc內部有浮動時，為了不影響外部元素的布局，bfc計算高度時會包括浮動的高度。 避免margin重疊也是這樣的乙個道理。
BFC 神奇背後的原理
bfc 是box formatting context的縮寫。bfc 定義 bfc block formatting context 直譯為 塊級格式化上下文 它是乙個獨立的渲染區域，只有block level box參與，它規定了內部的block level box如何布局，並且與這個區域外部毫不...
BFC 神奇背後的原理
bfc 已經是乙個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章，介紹了如何觸發 bfc 以及 bfc 的一些用處 如清浮動，防止 margin 重疊等 雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2.1 spec...
epoll原理剖析
首先我們來定義流的概念，乙個流可以是檔案，socket，pipe等等可以進行i o操作的核心物件。不管是檔案，還是套接字，還是管道，我們都可以把他們看作流。之後我們來討論i o的操作，通過read，我們可以從流中讀入資料 通過write，我們可以往流寫入資料。現在假定乙個情形，我們需要從流中讀資料，...