《面試系列》之什麼是BFC?

面試時經常會被問到有關BFC的問題，雖然網上有關講解BFC的文章不少，基本大篇理論知識，雖收穫很多，但面對面試時，殊不知如何回答，不能條理清晰、簡單明瞭的回答出面試官想考察的內容，容易致使回答着把本身都給弄暈了(尤爲在緊張的情緒下，很是容易致使越說越「亂」，從而形成面試官以爲你理解不到位的認知😭)。因此特此記錄下來，一爲了加深對BFC的理解，二則爲了面試能更好的回答。

相關面試題

1. 簡述你對BFC規範的理解
2. 對BFC規範(塊級格式化上下文：block formatting context)的理解
3. 如何建立塊級格式化上下文(block formatting context),BFC有什麼用
4. 對BFC規範的理解？
5. 等等

雖然上面題目看起來好像不太同樣，可是其實最終考察的點都是同樣的，我們只需分爲什麼是BFC、BFC有什麼做用和如何建立BFC子問題來依依回答便可。

什麼是BFC? (What)

逢管面試怎麼問BFC，我們就先給它回答一波什麼是BFC。

BFC稱爲塊級格式化上下文，是CSS中的一種渲染機制。是一個擁有獨立渲染區域的盒子(也能夠理解爲結界)，規定了內部元素如何佈局，而且盒子內部元素與外部元素互不影響。

對應的還有IFC、GFC和FFC(後兩個CSS3引入)

BFC有什麼做用? (Why)

上面咱們知道BFC規定了內部元素的佈局渲染，讓咱們查看下CSS規範文檔，看下BFC有哪些規則:

文檔規則

1. 在一個塊格式化上下文中，盒在垂直方向一個接一個地放置，從包含塊的頂部開始。
2. 兩個兄弟盒之間的垂直距離由margin屬性決定。
3. 同一個塊格式化上下文中的相鄰塊級盒之間的垂直外邊距會合並。
4. 同一個塊格式化上下文中，每一個盒的左外邊界（left outer edge）挨着包含塊的左外邊界（對於從右向左的格式化，右外邊界挨着）。
5. BFC的區域不會與float box重疊。
6. 計算BFC的高度時，浮動元素也參與計算。

詳細規則能夠查看9.4.1 塊格式化上下文

規則圖解

規則1和規則2應該是好理解的，這裏就不展開敘述，若是你不明白，那麼你可能學了個假CSS。😂

同一個塊格式化上下文中的相鄰塊級盒之間的垂直外邊距會合並

這裏是講margin collapse, 實際上是有以下狀況會發生合併: 1. 父子外邊距；2. 兄弟外邊距；3. 沒有高度的元素自身margin-top和margin-bottom會合並。

不過有幾點須要注意：

1. 須要屬於普通流中的盒子: 也就是脫離文檔流不算
2. 毗鄰: 也就是元素間沒有被padding、border、clear和line box分隔開
3. 垂直: 也就是margin-top和margin-bottom

只有知足上面幾點纔會發生margin合併效果。

上圖能夠看到，父子的margin-top和margin-bottom發生了合併。如何解決呢？觸發元素的BFC便可(注：下面都以設置元素overflow:hidden來觸發)，不過這裏問題來了，咱們是觸發父元素的BFC仍是子元素的BFC呢？

通過試驗，我發現只有觸發父元素的BFC才能避免margin合併，觸發子元素的BFC並沒有效果。

這裏父元素生效能夠借用標準來解釋:

Margins of elements that establish new block formatting contexts (such as floats and elements with "overflow" other than "visible") do not collapse with their in-flow children.（建立了BFC的元素不會和它的子元素髮生外邊距疊加）

那觸發子元素爲什麼沒有生效呢？這裏咱們先看下兄弟之間的合併。

一樣發生了margin合併，這裏不存在父子關係，因此咱們隨便觸發某個元素的BFC來看看效果。

發現仍是發生margin合併，按照規則，雖然觸發了child1的BFC，可是能夠得出兩個元素仍是處於同一個BFC。

通過以上試驗，我得出了未徹底經官方認知的結論:

BFC影響的是內部元素

1. 好比父子中，設置child爲BFC，由於影響的是內部，因此child仍是和par處於同一個BFC中
2. 兄弟中，設置child1爲BFC，影響的是child1的子元素，但child1和child2仍是處於同一個BFC

因此我可使用一個div進行包裹，並觸發該div的BFC，從而使得處於不一樣的BFC中，來避免margin合併。

完美！🎉，咱們這樣就能夠經過觸發BFC來避免margin合併了，固然避免margin合併還有不少方法，好比設置border等等。

BFC的區域不會與float box重疊

當咱們設置一個元素爲float，該元素脫離文檔流，會覆蓋在下方元素上面。

而若是設置元素BFC，將不會與float重疊，這樣咱們能夠經過該屬性來實現自適應兩欄佈局。

計算BFC的高度時，浮動元素也參與計算

由於浮動元素會脫離文檔流，因此包含塊元素的高度不會包含該浮動元素，致使高度發生塌陷。使用BFC，包含塊的高度包含浮動元素在內。

根據規則+實例，給出BFC有什麼做用。

如何建立BFC？(How)

1. 根元素，即html
2. float的值不爲none
3. overflow的值不爲visible
4. display的值爲inline-block、table-cell、table-caption
5. position的值爲absolute或fixed
6. 等等

---

若有不對之處，還懇請指出，謝謝~ 🖖 原文連接

好累，花了將近4個小時，第一遍沒保存，又從新寫了一遍。😭