對css有了解的朋友肯定都知道盒式模型這個概念暖璧，對一個元素設(shè)置css掉缺，首先需要知道這個元素是block還是inline類型。而BFC就是用來格式化塊級盒子，同樣管理inline類型的盒子還有IFC咙轩，以及其他的FC。那首先我們就來看看FC的概念阴颖。
Formatting Context：指頁面中一個渲染區(qū)域活喊，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位量愧，以及與其他元素的相互關(guān)系和作用钾菊。
BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區(qū)域偎肃，只有Block-level Box參與煞烫，該區(qū)域擁有一套渲染規(guī)則來約束塊級盒子的布局，且與區(qū)域外部無關(guān)累颂。BFC的生成
既然上文提到BFC是一塊渲染區(qū)域滞详，那這塊渲染區(qū)域到底在哪，它又是有多大紊馏，這些由生成BFC的元素決定料饥，CSS2.1中規(guī)定滿足下列CSS聲明之一的元素便會生成BFC。float的值不為none朱监；
overflow的值不為visible岸啡；
display的值為inline-block、table-cell赌朋、table-caption凰狞；
position的值為absolute或fixed；看到有人把display：table也認(rèn)為可以生成BFC沛慢，其實這里的主要原因在于Table會默認(rèn)生成一個匿名的table-cell赡若，正是這個匿名的table-cell生成了BFC。
BFC的約束規(guī)則
瀏覽器對于BFC這塊區(qū)域的約束規(guī)則如下：
生成BFC元素的子元素會一個接一個的放置团甲。垂直方向上他們的起點是一個包含塊的頂部逾冬，倆個相鄰子元素之間垂直距離取決于元素margin特性。在BFC中相鄰的塊級元素外邊距會折疊躺苦。
生成BFC元素的子元素中身腻，每一個子元素的外邊距和包含塊的左邊界相接觸，（對于從右到左的格式化匹厘，右外邊距和右邊界相接觸）嘀趟，除非這個子元素也創(chuàng)建了一個新的BFC（如它自身也是一個浮動元素）。
有朋友對它做了分解愈诚，我們直接拿來：
內(nèi)部的BOX會在垂直方向上一個接一個的放置她按；
垂直方向上的距離有margin決定牛隅。（完整的說法是：屬于同一個BFC的倆個相鄰的BOX的margin會發(fā)生重疊，與方向無關(guān)酌泰。）
每個元素的左外邊距與包含塊的左邊界相接觸（從左到右）媒佣，即使浮動元素也是如此。（這說明BFC中的子元素不會超出它的包含塊陵刹，而position為absolute的元素可以超出它的包含塊邊界）默伍；
BFC的區(qū)域不會與float的元素區(qū)域重疊；
計算BFC的高度時衰琐，浮動子元素也參與計算也糊；
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素碘耳，反之亦然显设；
看到以上的幾條約束框弛，讓我想起了學(xué)習(xí)CSS時的幾條規(guī)則：
Block元素會擴展到與父元素同寬辛辨，所以block元素會垂直排列；
垂直方向上的倆個相鄰DIV的margin會重疊瑟枫，而水平方向不會（此規(guī)則并不完全正確）斗搞；
浮動元素會盡量往左上方（或右下方）；
為父元素設(shè)置overflow：hidden或浮動父元素慷妙，則會包含浮動元素僻焚；
……
BFC在布局中的應(yīng)用
上面說了那么多，那么BFC究竟有什么用膝擂，畢竟再好的東西也要為我所用才行虑啤。
防止margin重疊：
同一個BFC中倆個相鄰的box才會發(fā)生重疊與方向無關(guān)，不過由于上文提到的第一條限制架馋，我們甚少看到水平方向的margin重疊狞山。這在IE這中是個特例，IE可以設(shè)置write-mode叉寂。
要阻止margin重疊萍启，只要將倆個元素別放在一個BFC中即可（可以用上文提到的方式讓相鄰元素其中一個生成BFC）。阻止倆個相鄰元素的重疊看起來沒有意義屏鳍，主要用于嵌套元素勘纯。
浮動相關(guān)問題；
使得父元素包含子元素钓瞭，常見的方式是為父元素設(shè)置overflow：hidden或者浮動父元素驳遵。根本原因在于創(chuàng)建BFC的元素，子浮動元素也會參與其高度計算山涡，即不會產(chǎn)生高度塌陷問題堤结。
多欄布局的一種方式
上文提到的一條規(guī)則：與浮動元素相鄰的已生成BFC的元素不能與浮動元素互相覆蓋搏讶。利用該特性可以作為多欄布局的一種實現(xiàn)方式。
IE中也有與BFC類似概念的haslayout。
總結(jié)
在我第一次接觸BFC時經(jīng)常有一個疑問来庭，BFC的結(jié)構(gòu)是什么樣的妒蔚，像DOM一樣的樹狀結(jié)構(gòu)，還是一個BFC集合月弛。其實我們不需要關(guān)心BFC的具體結(jié)構(gòu)肴盏，這要看瀏覽器的具體實現(xiàn)采用什么樣的數(shù)據(jù)結(jié)構(gòu)。對于BFC我們只需要知道使用一定的CSS聲明可以生成BFC帽衙，瀏覽器對生成的BFC有一系列的渲染規(guī)則菜皂，利用這些渲染規(guī)則我們可以達到一定的布局效果，為了達到特定的布局效果我們讓元素生成BFC厉萝。
對于CSS新手來說不建議涉獵BFC恍飘，還是應(yīng)該去看看相應(yīng)的CSS布局規(guī)則，像《CSS設(shè)計指南》谴垫、《CSS權(quán)威指南》這倆本都很不錯章母，達到一定積累再來看BFC，說不定會有一種豁然開朗的感覺翩剪。BFC中幾乎涉及到CSS布局的所有重要屬性乳怎，這也是BFC的難點和我們需要掌握BFC的意義所在。此處要說明的是前弯，這篇文章是我?guī)缀跻蛔植宦涞某聛淼尿阶海驗槲覍τ贐FC一竅不通，我認(rèn)為這樣抄錄一遍對于我理解BFC會有幫助的恕出，但是看到作者說不建議新手涉獵BFC询枚，我就釋然了。參考文獻——我的小樹林
** CSS
