1.解決margin疊加問題
三P每個p之間的距離為50px码泛，發(fā)生了外邊距疊加。 要解決這個疊加問題即讓每個P之間是100px，我們可以新建一個BFC择膝，怎么建呢？可以給p元素添加一個父元素检激，讓它觸發(fā)BFC肴捉。如下:
2.用于布局
從圖中我們會發(fā)現(xiàn)上面BFC的第三個特性，就是元素的左外邊距會觸碰到包含塊容器的做外邊框叔收，就算存在浮動也會如此齿穗。那么我們?nèi)绾谓鉀Q這個問題呢？看上面BFC第四個特性饺律，就是BFC不會與浮動盒子疊加窃页，那么我們是不是可以創(chuàng)建一個新的BFC來解決這個問題呢？來看看：
發(fā)現(xiàn)我們用overflow:hidden觸發(fā)main元素的BFC之后蓝晒，效果立馬出現(xiàn)了,一個兩欄布局就這么妥妥的搞掂…
3.用于清除浮動腮出，計算BFC高度.
因為上面第六個特性提到計算BFC高度時，浮動元素也會參與計算芝薇，我們先看一個例子：
我們發(fā)現(xiàn)由于里面兩個子元素浮動的關(guān)系胚嘲，兩個box已經(jīng)脫離了父元素的包含塊，父元素高度已經(jīng)塌陷洛二，我們需要讓父元素包含兩個box子元素馋劈，這樣計算高度時草娜，兩個浮動子元素就會參與，所以我們要閉合浮動拐揭，觸發(fā)父元素的BFC玄窝，我們還是繼續(xù)用overflow:hidden來看看效果吧：
怎么樣，效果還很明顯的嗎械姻，當然清理(閉合)浮動還有很多方法妒蛇，大家可以看看一絲大神寫的那些年我們一起清除過的浮動。 好了寫到這里基本才不多了楷拳，BFC是個很奇怪的東西绣夺，她一直隱式的存在我們的css樣式里，但是我們要記住BFC是頁面元素里一個獨立存在作用塊欢揖，它不影響它外面的布局陶耍，外面的元素也不會影響到BFC里面的布局。
- 轉(zhuǎn)載請注明出處（帶有 前端亂燉 字樣）和本文的顯式鏈接(http://www.html-js.com/article/1866)
What:了解該知識點的概念她混，本質(zhì)以及有關(guān)牽扯到的相關(guān)知識概念
BFC這個東西說常見的話你可能不覺得烈钞，但是你肯定會常用，也許你在用的時候也沒想到BFC這東西坤按。網(wǎng)上也有很多寫這些東西的文章毯欣，但是自己寫一遍印象更深一點。
首先我們看看w3c對BFC是怎么定義的:
http://www.w3.org/TR/CSS2/visuren.html#block-formatting
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
用谷歌翻譯(笑..我是谷歌腦殘粉)過來就是：
浮動元素和絕對定位元素晋涣，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）仪媒，以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的塊級格式化上下文谢鹊。
在一個塊級格式化上下文里算吩，盒子從包含塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的佃扼。兩個相鄰的塊級盒子的垂直外邊距會發(fā)生疊加偎巢。
在塊級格式化上下文中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說兼耀，則觸碰到右邊緣）压昼，即使存在浮動也是如此，除非這個盒子創(chuàng)建一個新的塊級格式化上下文瘤运。
從上面我們還可找出幾個幾個比較重要的概念東西窍霞，比如:boxe , block formatting context。毫無疑問BFC就是block formatting context的縮寫拯坟，中文就是“塊級格式化上下文”的意思但金。我們在那個w3c那個頁面發(fā)現(xiàn)還有其他inline formatting context，所以我們可以看看 formatting context是個什么東西：
Formatting context是W3C CSS2.1規(guī)范中的一個概念郁季。它是頁面中的一塊渲染區(qū)域冷溃，并且有一套渲染規(guī)則钱磅，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用似枕。
最常見的Formatting context有Block fomatting context(簡稱BFC)和Inline formatting context(簡稱IFC)盖淡。CSS2.1 中只有BFC和IFC, CSS3中還增加了GFC和FFC.
至于那個box還要講嗎？嗯凿歼，還是回顧一下：
Box是CSS布局的對象和基本單位褪迟， 直觀點來說，就是一個頁面是由很多個Box(即boxes)組成的答憔。元素的類型和display屬性牵咙，決定了這個Box的類型。 不同類型的Box攀唯， 會參與不同的Formatting context(一個決定如何渲染文檔的容器)，因此Box內(nèi)的元素會以不同的方式渲染渴丸。常見的盒子類型
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土童。 媽蛋四級剛剛飄過的孩子看這點英文不容易啊诗茎，有時候我們總覺的書上或者官方的概念定義的東西不利于我們理解，所以我們更喜歡有些老師通俗的講解献汗。這里我們也通俗的理解一下：
BFC就是“塊級格式化上下文”的意思敢订，創(chuàng)建了 BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與創(chuàng)建BFC罢吃， 它規(guī)定了內(nèi)部的Block-level Box如何布局楚午，并且與這個獨立盒子里的布局不受外部影響，當然它也不會影響到外面的元素尿招。
BFC有一下特性：
內(nèi)部的Box會在垂直方向矾柜，從頂部開始一個接一個地放置。
Box垂直方向的距離由margin決定就谜。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加
每個元素的margin box的左邊怪蔑， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)丧荐。即使存在浮動也是如此缆瓣。
BFC的區(qū)域不會與float box疊加。
BFC就是頁面上的一個隔離的獨立容器篮奄，容器里面的子元素不會影響到外面的元素捆愁，反之亦然割去。
計算BFC的高度時，浮動元素也參與計算昼丑。
好了What這一階段就到這了呻逆，基本的概念我們都要了解清楚，不清楚的多看幾遍菩帝，是在不清楚的我猜是我寫的不夠通俗易解咖城。
接下來我一般會考慮Why，即為什么會出現(xiàn)這個問題呼奢，為什么要這樣用宜雀，為什么會出現(xiàn)這些效果。但是這里就不寫了握础，因為我也不知道寫啥(哭…求高手指點)…
到最后我就是考慮How了辐董，不用說你也知道了，就是怎么解決這些問題禀综，這些知識點該怎么用简烘，還有沒有其他的方法..
那么我們該怎么使用BFC呢，如何觸發(fā)BFC呢定枷？：
float 除了none以外的值
overflow 除了visible 以外的值（hidden孤澎，auto，scroll ）
display (table-cell欠窒，table-caption覆旭，inline-block, flex, inline-flex)
position值為（absolute，fixed）
fieldset元素
在以上的情況里可以創(chuàng)建BFC岖妄。
接下我們看下怎么運用BFC型将，在哪些場景可以用到BFC.
