BFC與IFC

 

在解釋BFC是什麼以前，咱們先介紹另外兩個概念：Box和Formatting Context。

Box

「Box」這個單詞的意思就是「盒子」。

咱們的網頁是由不少個HTML元素組成的。瞭解過CSS盒模型的都應該知道，裏面有一個概念就是把網頁裏一個一個的元素看做是一個一個的盒子，一個網頁就能夠看做是由不少個盒子組成的，換一個洋氣的說法，那麼就是——

一個網頁是由不少個Box組成的。

同時，咱們的元素又分爲塊級元素和行內元素，而它們二者之間又能夠經過CSS屬性「display」來相互進行轉換。

因此，咱們HTML元素的類型和「display」的屬性，決定了咱們Box（盒子）的類型。而不一樣類型的Box會參與到不一樣的Formatting Context中，不一樣的Formatting Context會讓Box內的元素用不一樣的方式去渲染。

Formatting Context

「格式化上下文」，Formatting Context 是W3C在CSS2.1中提出的一個概念。

什麼是「上下文」？

上下文定義了元素在CSS中所處的環境。

什麼是「格式化」？

格式化則代表了在這個環境中，處於此環境中的元素都應該被初始化。

因此，「格式化上下文」實際上它是指一塊獨立的渲染區域，在它的渲染區域裏，有一套本身的渲染規則，決定着內部子元素如何定位佈局以及它自身與其餘元素之間的關係和相互做用。

咱們如今比較常見的Formatting Context是Block Formatting Context（BFC）和 Inline Formatting Context（IFC）。

CSS2.1中只有 BFC 和 IFC，CSS3 中還增長了 GFC 和 FFC。

 

BFC（Block Formatting Context）塊級格式化上下文

結合上面提到的Formatting Context的概念，那麼BFC的意思其實就是 一個只有塊級元素參與的獨立渲染區域。

舉個栗子：

　　咱們把咱們的頁面看做是一個集裝箱，如今我和你兩我的都分別有一批貨物要放進集裝箱內。當我第一個進去放的時候，我能夠選擇隨意的擺放個人貨物，橫着排，豎着排，斜着排。可是我擺放貨物的位置，就直接影響到了你後面進來擺放貨物的位置。因此，咱們須要一個辦法，既能讓我按照我本身的規則去擺放個人貨物，同時又不影響你的貨物位置的擺放。

　　因而我在集裝箱裏用筆劃分出了一塊屬於個人區域，在個人這塊區域裏，我能夠按照個人規則去擺放個人貨物，無論我怎麼擺放，你的貨物都只能從個人區域線外開始擺放。因此，個人貨物的擺放位置對你沒有任何影響。

　　那麼，我用筆劃分出來的這一塊屬於個人區域，就是個人BFC。

BFC的定義

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域（建立了BFC的元素就是一個獨立的盒子），只有Block-level box參與， 它規定了內部的Block-level Box如何佈局，且與區域外部其餘元素互不影響。

怎麼造成BFC

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

BFC的佈局規則

咱們回到集裝箱的栗子。

雖然我有我本身的一塊區域了，可是在個人區域裏也有一套我本身的一套擺放規則。好比易碎物品不能放在其餘箱子下面，容易受潮的貨物又應該放在什麼位置等等......

因此，在BFC裏也有一套他的佈局規則。

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

 

IFC（Inline Formatting Context）行內格式化上下文

IFC和BFC同樣，既不是屬性也不是元素，而是一種環境，一種上下文。

怎麼造成IFC

只要有行內元素的出現，就會產生IFC。

IFC的佈局規則

1. 框（boxes）一個接一個地水平排列，起點是包含塊的頂部；
2. 水平方向上的margin，border和padding在框之間獲得保留；
3. 框在垂直方向上能夠以不一樣的方式對齊：它們的頂部或底部對齊，或根據其中文字的基線對齊；
4. 包含那些框的長方形區域，會造成一行，叫作行盒(line box)；
5. 一個行框的寬度由包含它的元素的寬度和包含它的元素裏面有沒有float元素來決定，高度的肯定由行高度計算規則決定；

line box行盒

一橫排的行內元素在垂直方向上有不少種對齊方式：底部或頂部對齊，或者根據文字的基線對齊。他們對齊後的外圍造成的一個矩形的區域，就叫作一個line box（行盒）。

除了IFC之外，對於inline-level box（行內元素）排版而言另外一個重要的對象，就是line box。

一個line box的寬度由包含它的元素的寬度和包含它的元素裏面有沒有float元素來決定，高度的肯定由行高計算規則決定。

其實這句話解釋了爲何行內元素是不能設置垂直方向的padding、margin等的緣由。由於即便設置了，也不會影響line box的高度,可能會在每一個瀏覽器的表現各異，但大多數不會達到預期的效果。