前端面試題-BFC(塊格式化上下文)

1、BFC 的概念

1.規範解釋

塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域。

2.通俗理解

• BFC 是一個獨立的佈局環境,能夠理解爲一個容器,在這個容器中按照必定規則進行物品擺放,而且不會影響其它環境中的物品。
• 若是一個元素符合觸發 BFC 的條件，則 BFC 中的元素佈局不受外部影響。
• 浮動元素會建立 BFC，則浮動元素內部子元素主要受該浮動元素影響，因此兩個浮動元素之間是互不影響的。

2、建立 BFC

1. 根元素或包含根元素的元素
2. 浮動元素 float ＝ left | right 或 inherit（≠ none）
3. 絕對定位元素 position ＝ absolute 或 fixed
4. display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption
5. overflow ＝ hidden | auto 或 scroll (≠ visible)

3、BFC 的特性

1. BFC 是一個獨立的容器，容器內子元素不會影響容器外的元素。反之亦如此。
2. 盒子從頂端開始垂直地一個接一個地排列，盒子之間垂直的間距是由 margin 決定的。
3. 在同一個 BFC 中，兩個相鄰的塊級盒子的垂直外邊距會發生重疊。
4. BFC 區域不會和 float box 發生重疊。
5. BFC 可以識別幷包含浮動元素，當計算其區域的高度時，浮動元素也能夠參與計算了。

4、BFC 的做用

1.包含浮動元素（清除浮動）

• 浮動元素會脫離文檔流(絕對定位元素也會脫離文檔流)，致使沒法計算準確的高度，這種問題稱爲高度塌陷。
• 解決高度塌陷問題的前提是可以識別幷包含浮動元素，也就是清除浮動。

問題舉例：如上左圖所示，容器（container）沒有高度或者 height = auto ,而且其子元素（sibling）是浮動元素，因此該容器的高度是不會被撐開的，即高度塌陷。

解決方法：在容器（container）中建立 BFC。

HTML

<div class="container">
        <div class="Sibling"></div>
        <div class="Sibling"></div>
</div>

CSS

.container { 
        overflow: hidden; /* creates block formatting context */ 
        background-color: green; 
} 
.container .Sibling { 
        float: left; 
        margin: 10px;
        background-color: lightgreen;  
}

特別提示：

• 經過 overflow:hidden 建立 BFC，當然能夠解決高度塌陷的問題，可是大範圍應用在佈局上確定不是最合適的，畢竟 overflow:hidden 會形成溢出隱藏的問題，尤爲是與 JS 的交互效果會有影響。
• 咱們可使用 clearfix 實現清除浮動，這裏就很少介紹了，想要了解的能夠閱讀前端面試題-clearfix（清除浮動）。

2.致使外邊距摺疊

相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的垂直邊距相遇時， 它們將造成一個外邊距。這個外邊距的高度等於兩個發生摺疊的外邊距的高度中的較大者。

HTML

<div class="Container"> 
    <p>Sibling 1</p> 
    <p>Sibling 2</p> 
</div>

CSS

.Container { 
    background-color: red; 
    overflow: hidden; /* creates a block formatting context */ 
} 
p { 
    background-color: lightgreen; 
    margin: 10px 0; 
}

如上圖所示：紅色盒子（Container）中包含兩個綠色的兄弟元素（P），而且紅色盒子設置 overflow: hidden; 則一個BFC 已經被建立,即致使外邊距摺疊。

理論上兩個兄弟元素之間的邊距應該是兩個元素的邊距之和（20px），但實際是 10px。這就是外邊距摺疊致使的。

2.1 摺疊外邊距的值

• 兩個相鄰的外邊距都是 正數 時，摺疊外邊距是二者中較大的值。
• 兩個相鄰的外邊距都是 負數 時，摺疊外邊距是二者中絕對值較大的值。
• 兩個相鄰的外邊距是 一正一負 時，摺疊外邊距是二者相加的和。

2.2 外邊距摺疊的條件是 margin 必須相鄰!

3.避免外邊距摺疊

這一聽起來可能有些困惑，由於咱們在前面討論了 BFC 致使外邊距摺疊的問題。但咱們必須記住的是外邊距摺疊（Margin collapsing）只會發生在屬於同一BFC的塊級元素之間。若是它們屬於不一樣的 BFC，它們之間的外邊距則不會摺疊。因此經過建立一個不一樣的 BFC ，就能夠避免外邊距摺疊。

修改前面的例子並添加第三個兄弟元素，CSS不變。

HTML

<div class="Container"> 
        <p>Sibling 1</p> 
        <p>Sibling 2</p> 
        <p>Sibling 3</p> 
</div>

結果不會改變，還會摺疊外邊距，三個兄弟元素（P）將會以垂直距離爲 10px 的距離分開。緣由是三個兄弟元素都屬於同一個 BFC。

建立一個不一樣的 BFC ，就能夠避免外邊距摺疊。

HTML

<div class="Container"> 
        <p>Sibling 1</p> 
        <p>Sibling 2</p> 
        <div class="newBFC"> 
            <p>Sibling 3</p> 
        </div> 
</div>

CSS

.Container { 
            background-color: red; 
            overflow: hidden; /* creates a block formatting context */ 
} 
p { 
            background-color: lightgreen; 
            margin: 10px 0; 
}
.newBFC { 
            overflow: hidden; /* creates new block formatting context */ 
}

當第二和第三個兄弟元素屬於不一樣的 BFC 時，它們之間就沒有外邊距摺疊。

閱讀更多