在認識BFC之前，首先我們要知道Positioning schemes（定位規則）與Formatting context（格式化上下文）。
normal flowfloatabsolute positioningFormatting context(格式化上下文) 是CSS中對於排版的概念，不同的格式化環境會有不同的渲染規則，決定box怎麼被排列、怎麼影響跟其它box的相對位置，也決定了其子元素的排列。formatting context有以下類型：
BFC(Block formatting context)
IFC(Inline formatting context)
FFC(Flex formatting context)
GFC(Grid formatting context)
以上都屬於normal flow的範圍。除了原本元素產生的原生box有block-level box跟inline-level box之外，也可以用CSS的display屬性來改變box所參與的formatting context，有些屬性可以對box內創造一個formatting context的環境，例如生成BFC、FFC、GFC渲染環境給後代元素，而IFC是指元素參與IFC的佈局。
所有的element-box都存在<html>根元素這個block container內。可以放入block box ; 也可以放入inline box。前者參與BFC佈局 ; 後者參與IFC佈局。
擷取自[CSS規範]中對於formatting context的描述：
A formatting context is the environment into which a set of related boxes are laid out. Different formatting contexts lay out their boxes according to different rules. For example, a flex formatting context lays out boxes according to the flex layout rules [CSS3-FLEXBOX], whereas a block formatting context lays out boxes according to the block-and-inline layout rules [CSS2].
Additionally, some types of formatting contexts interleave and co-exist: for example, an inline formatting context exists within and interacts with the block formatting context of the element that establishes it, and a ruby container overlays a ruby formatting context over the inline formatting context in which its ruby base container participates.
A box either establishes a new independent formatting context or continues the formatting context of its containing block. In some cases, it might additionally establish a new (non-independent) co-existing formatting context. Unless otherwise specified, however, establishing a new formatting context creates an independent formatting context. The type of formatting context established by the box is determined by its inner display type. E.g. a grid container establishes a new grid formatting context, a ruby container establishes a new ruby formatting context, and a block container can establish a new block formatting context and/or a new inline formatting context. See the display property.
在了解BFC時，會有一些術語需要釐清，block-level boxes是元素產生的block box，blocks containing boxes是包含後代元素的block box，這兩者都可單稱為block box。
*該圖擷取自MDN
當一個box-level box參與了BFC佈局，它會撐滿整個容器寬度，並垂直向下排列，而如果box內包含了其它子元素，它本身成為了block containing box(塊容器)（也可稱為block container），它內部也是一個BFC的佈局環境：
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.parent本身為block box，參與了BFC佈局，而它本身又是block container，對內創造BFC佈局環境給後代元素。它的子元素.child本身參與BFC佈局，佔滿容器寬度，垂直向下排列，box之間的垂直間隔用margin區別（相鄰的box垂直方向margin會有collapse現象）。
以下條件會觸發元素創建新的BFC：
<html>
float參數不為none
position參數為absolute或fixed
display參數為inline-block
display參數為table-cell(HTML表格欄預設為該值)display參數為table-caption（HTML表格標題預設為該值）display參數為table, table-row, table-row-group, table-header-group, table-footer-group（分別是HTML<table>、<row>、<tbody>、<thead>、<tfoot>的預設值）overflow參數不為visible的block元素display參數為flow-root的元素contain參數為layout、content或paint的元素display參數為flex或inline-flex元素的子元素display參數為grid或inline-grid元素的子元素column-count或column-width參數不為auto，包括column-count: 1
column-span為all的元素始終會創建一個新的BFC。創建一個新的
BFC可以把它想成是，為了讓這個元素在某些條件下，仍然可以像個箱子一樣裝東西，所以創建一個新的BFC佈局環境給它的後代元素。目前可能還不會有感覺，但我們可以在之後提到的float屬性、positon屬性值為absolute時再來認識它的作用。
今天的筆記告一段落，明天見～
*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。
iThome鐵人賽
看影片追技術