BFC IFC 總結記錄

引用參考：https://segmentfault.com/a/1190000017273573?utm_medium=referral&utm_source=tuicool

http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

BFC

定義

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干。

BFC佈局規則：

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
• 每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
• BFC的區域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算

哪些元素會生成BFC?

• 根元素
• float屬性不爲none
• position爲absolute或fixed
• display爲inline-block, table-cell, table-caption, flex, inline-flex
• overflow不爲visible

總結

BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

• 由於BFC內部的元素和外部的元素絕對不會互相影響，所以：
• 當BFC外部存在浮動時，它不該該影響BFC內部Box的佈局，BFC會經過變窄，而不與浮動有重疊。
• 一樣的，當BFC內部有浮動時，爲了避免影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。

IFC

定義

Inline Formatting Contexts，也就是「內聯格式化上下文」。

造成條件：

• 塊級元素中僅包含內聯級別元素

• 造成條件很是簡單，須要注意的是當IFC中有塊級元素插入時，會產生兩個匿名塊將父元素分割開來，產生兩個IFC。

佈局規則

• 子元素水平方向橫向排列，而且垂直方向起點爲元素頂部。
• 子元素只會計算橫向樣式空間，【padding、border、margin】，垂直方向樣式空間不會被計算，【padding、border、margin】。
• 在垂直方向上，子元素會以不一樣形式來對齊（vertical-align）
• 能把在一行上的框都徹底包含進去的一個矩形區域，被稱爲該行的行框（line box）。行框的寬度是由包含塊（containing box）和與其中的浮動來決定。 IFC中的「line box」通常左右邊貼緊其包含塊，但float元素會優先排列。
• IFC中的「line box」高度由 CSS 行高計算規則來肯定，同個IFC下的多個line box高度可能會不一樣。
• 當 inline-level boxes的總寬度少於包含它們的line box時，其水平渲染規則由 text-align 屬性值來決定。
• 當一個「inline box」超過父元素的寬度時，它會被分割成多個boxes，這些 boxes 分佈在多個「line box」中。若是子元素未設置強制換行的狀況下，「inline box」將不可被分割，將會溢出父元素。