首先按照常規解釋一下名詞，BFC(Block formatting context)直譯為"塊級格式化上下文"。一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何佈局和渲染，並且有一套自己的渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用，並且與這個區域外部毫不相干。

然後大腦出現三個？？？，那接著往下看，我們在清除浮動的時候一般利用三個方法，偽元素::after、空<div>盒子，還有給父元素新增overflow：hidden；第一個和第二好理解，就是在浮動元素後面清除浮動，那麼第三個呢，我最開始在網上找到的答案是，設定了overflow屬性，會重新計算盒子的高度和寬度 從而撐起了塌陷的盒子。直到開始接觸BFC概念，第三種方法正是用到了BFC，接下進入正題。

通俗點理解，BFC就是一個隔離了的獨立容器，容器裡面的元素不會在佈局上影響到外面的元素，並且 BFC 具有普通容器所沒有的一些特性。

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

    只要元素滿足下面任一條件即可觸發 BFC 特性：

    • body 根元素
    • 浮動元素：float 除 none 以外的值
    • 絕對定位元素：position (absolute、fixed)
    • display 為 inline-block、table-cells、flex
    • overflow 除了 visible 以外的值 (hidden、auto、scroll)

    理解了這些，我們能幹點什麼呢？
    首先我們

    清除內部浮動 給父元素觸發為BFC特性；

    同一個 BFC 下外邊距會發生摺疊，如果同一個父元素下有兩個div，兩個div margin：100px;因為父元素的bfc特性，這兩個div中間距離是100px；而不是第一個div的下邊距+第二個div的上邊距。因為body具有BFC特性，所以這種外邊距重合經常會發生，我們可以給這其中一個div外套一個具有bfc特性的父元素，讓這兩個元素不再同屬於一個BFC特性父元素下，就不會發生重疊。

    自適應兩欄佈局；
    一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
    利用這個特性我們處理兩列自適應，讓左邊div的float left，給右邊的DIV增加BFC特性，所以右邊的DIV會充滿剩下的區別，並且不會被flaot元素覆蓋。

    “因為BFC內部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應該影響BFC內部Box的佈局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內部有浮動時，為了不影響外部元素的佈局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。”

    此篇僅作個人學習筆記；如果有同學正在學習bfc的理解，建議轉到兩位大大：

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

    https://zhuanlan.zhihu.com/p/25321647；

    再次感謝兩位大大的文章，讓我受益匪淺。