詳解BFC【 block formatting context】

BFC這個東西說常見的話你可能不覺得，但是你肯定會常用到，也許你在用的時候也沒想到BFC這東西。那它究竟是什么呢，我們來一起看一下。

官方給出的BFC解釋是這樣的，浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如

inline-blocks, table-cells

table-captions

在一個塊級格式化上下文里，盒子從包含塊的頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。兩個相鄰的塊級盒子的垂直外邊距會發生疊加。

在塊級格式化上下文中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣），即使存在浮動也是如此，除非這個盒子創建一個新的塊級格式化上下文。

上面反復提到了“

block formatting context

inline formatting context

formatting context

formatting：n，格式化的意思，v，使格式化( format的現在分詞 ); 規定…的格式（或形狀、大小、比例等）;
context：語境; 上下文; 背景; 環境;

放到一起的意思就是“格式化上下文”，它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

最常見的Formatting context有

Block fomatting context

Inline formatting context

Box也是比較重要的一個概念，Box是CSS布局的對象和基本單位， 直觀點來說，就是一個頁面是由很多個Box(即boxes)組成的。元素的類型和display屬性，決定了這個Box的類型。 不同類型的Box， 會參與不同的

Formatting context

例如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