那麼，什麼事bfc呢？bfc是塊級格式化上下文（block formatting context）的簡寫，用來規範塊級容器的布局方式。主要的特性是有以下幾點：
1.隔絕空間。使bfc內外的布局不會相互影響（個人猜測，在寫一些ui控制項的時候是不是應該將嘴歪層設定乙個bfc，希望哪位大神給講解一下）
2.bfc內的元素從上至下一次排列，盡可能的高階上方(同級元素在垂直方向上的margin會存在塌陷，這個問題以前經常碰到，一直認為是個bug)，水品方向的排列
方向由你的水平對齊方式決定，子元素的margin和緊貼著bfc的border
3.bfc的區域不會同浮動元素的區域疊加
4.bfc的區域在計算高度時會計算其內浮動元素的高度
說了這麼多的特性，那麼怎樣去建立乙個bfc呢？從w3c的介紹裡可以得到：
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.大概的意思是：浮動元素，絕對定位元素，非塊級盒子的塊級容器（如inline-block,table-cells,以及table-caption）和overflow不為visible的塊級盒子都會為其子元素建立乙個bfc。用**就是：
float:left|right;
position:absolute|fixed;
display:inline-block|table-cells|table-captions;
overflow:hidden;
那麼還有乙個問題要註明是非塊級盒子的塊級容器呢？既然是塊級格式化上下文，為什麼不包含塊級盒子？我的理解是，在乙個頁面中，以塊級盒子居多，特別是div+css布局的時候，整個頁面可能有上百個塊級盒子，這樣整個頁面就被分成了上百個bfc。由於bfc有內外隔離的特性，反而會導致布局上更加困難？
1.清楚浮動
根據bfc的區域在計算高度時會計算其內浮動元素的高度以及bfc隔絕內外布局的特性（我猜的…）可以知道，當bfc內有浮動元素並且浮動元素的高度高於其他所有元素時，bfc的高度等於浮動元素的高度。為了方便說明，來上個圖吧
這張是在未建立bfc時的狀態，對應的**是：
<可以看到，外層的.bfc的高度等於.default的高度，浮動元素並未被計算在內，導致了高度的塌陷。head
>
<
meta
charset
="utf-8"
>
<
title
>bfc
title
>
<
style
>
.bfc
.float
.default
style
>
head
>
<
body
>
<
div
class
="bfc"
>
<
div
class
="float"
>float
div>
<
div
class
="default"
>default
div>
div>
body
>
再來看看這張，在外層.fbc上建立了bfc之後的效果
.bfc此時，浮動唄清除，.float的高度被計算在.bfc內。以前一直不明白為什麼overflow可以清除浮動，其實就是因為bfc的幫助。
2.解決子元素與父元素間margin失效的問題
先看下面這段**
1你覺得效果是什麼？這樣嗎？<
head
>
2<
meta
charset
="utf-8"
>
3<
title
>bfc
title
>
4<
style
>
5.bfc
6.bfc>div
7style
>
8head
>
9<
body
>
10<
div
class
="bfc"
>
11<
div>
div>
12div
>
13body
>
咋一看好像是的，但是結果呢？
這個才是正確答案，為什麼？我們從bfc的特性中去看看。bfc中的元素在垂直方向上會盡可能的往上方貼近，於是子元素的margin-top緊貼著父元素的border-top，導致父子元素之間的margin消失了。這個問題我在以前經常碰到，當時的解決方案是用padding代替margin，但是還是會有一些小問題，比如我想給子元素乙個border-bottom,但是border-bottom的寬度會貫穿整個父元素。最後的替代解決方案是父元素使用用margin和padding，而子元素什麼都不設定。在看完bfc之後明白，只要在父元素上設定overflow：hidden為其建立bfc之後問題就解決了。
好了。我所了解的bfc就是這樣的，可能還有很多特性我不知道，再次歡迎高手指正。
看一下時間… 寫了1個多小時，看看文章好像並不長的樣子。應該是第一次寫的原因吧！！休息一會，可以吃午飯了。
對於浮動和BFC的理解
浮動屬性產生之初是為了實現 文字環繞 的效果，讓文字環繞在網頁實現類似word中 混排 如果給元素設定float left right 會導致該元素脫離文件流。像設定的方向靠近。如何父元素沒有設定高度，而所有的子元素都設定了浮動，會導致父元素的高度塌陷為0 以前對bfc一直很模糊的概覽。bfc bl...
BFC 自適應布局
bfc全稱為block formatting context，塊級上下文結構，具有bfc結構的元素的內部元素不會影響外部元素的布局和結構。bfc可以由以下幾種方式觸發 根元素float不為none overflow不為visible position除relative和static display的...
前端BFC布局學習
bfc，全稱為 block formatting context 按照我的理解是我們在某一條件下會觸發bfc布局，會產生一定的效果。block formatting contexts翻譯為 塊級元素格式化上下文。它決定了塊級元素如何對它的內容進行布局，以及與其他元素的關係和相互作用。其中塊級元素可以...