對BFC的理解

BFC

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

通俗理解

BFC是一個獨立的佈局環境，可以理解爲一個容器，在這個容器中按照一定規則進行物品擺放，並且不會影響其外部元素。

如果一個元素符合出發BFC的條件，則BFC中的元素佈局不受外部影響。

浮動元素會創建BFC，則浮動元素內部子元素受該浮動元素影響，所以兩個浮動元素之間是互不影響的。

創建BFC

• 根元素或包含根元素的元素

• 浮動元素 float = left|right 或 inherit，float 不能等於none

• 絕對定位元素 position = absolute|fixed
• display = inline-block|flex|inline-flex|table-cell|table-caption

• overflow = hidden|auto|scroll 不能等於visible

BFC的特性

BFC是一個獨立的容器，它不會影響其外部元素，外部元素也無法影響到它。

BFC內部的元素從頂部開始一個接一個垂直排列，盒子之間的間距是由margin決定的。

在同一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會發生重疊。

BFC區域不會和float box發生重疊，因爲float box也屬於BFC

BFC能夠識別幷包含浮動元素，當計算其區域的高度時，浮動元素也可以參與計算。

BFC的作用

解決高度塌陷：浮動元素會脫離文檔流（絕對定位也會脫離文檔流），導致無法計算準確的高度

解決方式：在容器中創建BFC

<style>
    .container {
        overflow: hidden;
        background: green;
    }
    .container .sibling {
        float: left;
        margin: 10px;
        background: red;
    }
</style>

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

需要注意的是：

• 通過 overflow:hidden 創建 BFC，固然可以解決高度塌陷的問題，但是大範圍應用在佈局上肯定不是最合適的，畢竟 overflow:hidden 會造成溢出隱藏的問題，尤其是與 JS 的交互效果會有影響。
• 我們可以使用 clearfix 實現清除浮動

外邊距摺疊

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

注意外邊距摺疊的條件是margin必須相鄰

摺疊外邊距的取值

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

<style>
   .container {
       overflow: hidden;//最外面的容器爲bfc
   }
   .container .box {
       width: 150px;
       height: 150px;
       background: red;
       margin: 10px;
   }
</style>

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

外邊距摺疊（Margin collapsing）只會發生在屬於同一BFC的塊級元素之間。如果它們屬於不同的 BFC，它們之間的外邊距則不會摺疊。所以通過創建一個不同的 BFC ，就可以避免外邊距摺疊

<style>
    .container {
        overflow: hidden;//最外面的容器爲bfc
        background: blue;
    }
    
    .container .box {
        width: 150px;
        height: 150px;
        background: red;
        margin: 10px;
    }
    .newBFC {
        overflow: hidden;//創建BFC，解決外邊距摺疊問題
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="newBFC">
       <div class="box"></div> 
    </div>
</div>

參考博客： https://segmentfault.com/a/1190000013647777