Ba la la la ~ 讀者朋友泵殴，你們好啊涮帘，又到了冷鋒時間，話不多說笑诅，發(fā)車调缨！
一疮鲫、BFC是什么？
BFC（Block Formatting Context）直譯為“塊級格式化范圍”弦叶。是W3C CSS 2.1規(guī)范中的一個概念俊犯，它決定了元素如何對其內容進行定位，以及與其他元素的關系和相互作用伤哺。當涉及到可視化布局的時候燕侠，Block Formatting Context提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定規(guī)則進行布局立莉。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局绢彤。比如浮動元素會形成BFC，浮動元素內部子元素的主要受該浮動元素影響蜓耻，兩個浮動元素之間是互不影響的茫舶。這里有點類似一個BFC就是一個獨立的行政單位的意思。也可以說BFC就是一個作用范圍刹淌∪氖希可以把它理解成是一個獨立的容器，并且這個容器的里box的布局有勾，與這個容器外的毫不相干疹启。
另一個通俗點的解釋是：在普通流中的Box(框)屬于一種formatting context(格式化上下文)，類型可以是block柠衅，或者是inline皮仁，但不能同時屬于這兩者。并且菲宴，Block boxes(塊框)在block formatting context(塊格式化上下文)里格式化贷祈，Inline boxes(塊內框)則在inline formatting context(行內格式化上下文)里格式化。任何被渲染的元素都屬于一個box喝峦，并且不是
block势誊，就是inline。即使是未被任何元素包裹的文本谣蠢，根據不同的情況粟耻，也會屬于匿名的block boxes或者inline boxes。所以上面的描述眉踱，即是把所有的元素劃分到對應的formatting context里挤忙。
二、其一般表現規(guī)則谈喳，我整理了以下這幾個情況：
1册烈、在創(chuàng)建了Block Formatting Context的元素中，其子元素按文檔流一個接一個地放置婿禽。垂直方向上他們的起點是一個包含塊的頂部赏僧，兩個相鄰的元素之間的垂直距離取決于 ‘margin’ 特性大猛。
根據CSS 2.1 8.3.1 Collapsing margins 第一條，兩個相鄰的普通流中的塊框在垂直位置的空白邊會發(fā)生折疊現象淀零。也就是處于同一個BFC中的兩個垂直窗口的margin會重疊挽绩。
根據CSS 2.1 8.3.1 Collapsing margins 第三條，生成block formatting context的元素不會和在流中的子元素發(fā)生空白邊折疊驾中。所以解決這種問題的辦法是要為兩個容器添加具有BFC的包裹容器唉堪。
2、在Block Formatting Context
中哀卫，每一個元素左外邊與包含塊的左邊相接觸（對于從右到左的格式化巨坊，右外邊接觸右邊）撬槽， 即使存在浮動也是如此（盡管一個元素的內容區(qū)域會由于浮動而壓縮）此改，除非這個元素也創(chuàng)建了一個新的
Block Formatting Context
。
3侄柔、Block Formatting Context就是頁面上的一個隔離的獨立容器共啃，容器面的子元素不會在布局上影響到外面的元素，反之也是如此暂题。
4移剪、根據CSS 2.1 9.5 Floats中的描述，創(chuàng)建了Block Formatting Context的元素不能與浮動元素重疊薪者。
表格的border-box纵苛、塊級的替換元素、或是在普通流中創(chuàng)建了新的block formatting context（如元素的'overflow'特性不為'visible'時）的元素不可以與位于相同的block formatting context中的浮動元素相重疊言津。
5 攻人、當容器有足夠的剩余空間容納BFC的寬度時，所有瀏覽器都會將BFC放置在浮動元素所在行的剩余空間內悬槽。
6怀吻、 在IE6 IE7 IE8 Chrome Opera中，當BFC的寬度介于"容器剩余寬度"與"容器寬度"之間時初婆，BFC會顯示在浮動元素的下一行蓬坡；在Safari中，BFC則仍然保持顯示在浮動元素所在行磅叛，并且BFC溢出容器屑咳；在Firefox中，當容器本身也創(chuàng)建了BFC或者容器的'padding-top'弊琴、'border-top-width'這些特性不都為0時表現與IE8(S)兆龙、Chrome類似，否則表現與Safari類似访雪。經驗證详瑞，最新版本的瀏覽中只有firefox會在同一行顯示掂林，其它瀏覽器均換行。
7坝橡、 在IE6 IE7 IE8 Opera中泻帮，當BFC的寬度大于"容器寬度"時，BFC會顯示在浮動元素的下一行计寇；在Chrome Safari中锣杂，BFC則仍然保持顯示在浮動元素所在行，并且BFC溢出容器番宁；在Firefox中元莫，當容器本身也創(chuàng)建了BFC或者容器的'padding- top'、'border-top-width'這些特性不都為0時表現與IE8(S)類似蝶押，否則表現與Chrome類似踱蠢。經驗證，最新版本的瀏覽中只有
firefox會在同一行顯示棋电，其它瀏覽器均換行茎截。
8、根據CSS2.1規(guī)范第
10.6.7部分的高度計算規(guī)則赶盔，在計算生成了
block formatting context的元素的高度時企锌，其浮動子元素應該參與計算。
以上為個人意見于未，如有雷同撕攒，純屬巧合，歡迎大家多提意見烘浦！Bey 了 個 Bey ~
