在CSS奇技淫巧之負邊距的應用里提到了某些場景下前一個塊的margin-bottom和文檔流之后的下一個塊的margin-top會發生重疊現象，而一個節點的margin-top和其子節點的margin-top也會互相影響。其實在CSS中，還有不少這樣的"靈異"現象:

1. 邊距折疊
   這就是前文所述，上一個盒子的底邊距和下一個盒子的頂邊距相互重疊，舉例如下：

HTML

        <div class="top">I am top!</div>
        <div class="bottom">I am bottom!</div>

CSS

        .top {
          height: 100px;
          margin-bottom: 20px;
          background: red;
        }
       .bottom {
          height: 100px;
          margin-top: 10px;
          background: green;
        }

在codepen中或者本地HTML測試，上下間的間距并不是預期的20+10=30像素，而是max(20,10)=20像素。

2. 浮動布局
   通過設置浮動屬性，很容易實現文字環繞效果:
   HTML
   <div class="left">I am left!</div>
   <div class="right">I am right!</div>
   CSS
   .left {
   height: 50px;
   background: red;
   float: left;
   }
   .right {
   height: 100px;
   background: green;
   }
   left被right覆蓋，而right對left實現了環繞效果！效果是很好的，然而其原理呢？
3. 自適應三欄布局
   比2更神奇的是，基于float的自適應三欄布局：
   HTML

        <div class="left">I am left!</div>
        <div class="right">I am right!</div>
        <div class="center">I am center!</div>

CSS

        .left {
          background: red;
          float: left;
          height: 100px;
        }

        .right {
          height: 100px;
          background: green;
          float: left;
        }

        .center {
          background: blue;
          height: 100px;
        }

對于center節點，這里并沒有手動設置其寬度，卻很容易的實現了自適應寬度的三列布局！
當然，還有更多的類似的例子，比如父子節點的margin-top的重疊，而通過overflow-hidden能清除子節點浮動效果，避免子元素的浮動脫離文檔流而造成的高度坍塌，就不一一枚舉了。我們在此探討一下其背后的原理——BFC(Blocking Formatting Context)。

盒模型

在探究BFC之前，我們有必要回顧一下CSS經典的盒模型：

CSS盒模型.png

BFC

盒模型是布局的基本單位，而BFC則是渲染的基本單位，它定義了一個基本環境，環境內節點的布局不影響環境外的節點。那么在什么情況下瀏覽器會定義一個BFC呢?

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

而一旦形成BFC，將具有以下性質：

• 內部的Box會在垂直方向，一個接一個地放置。
• Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的 margin會發生重疊
• 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
• BFC的區域不會與float box重疊。
• BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
• 計算BFC的高度時，浮動元素也參與計算
  以上的定義和描述引用自相關文檔，這里我們梳理和理解一下：

1. position, display, float, overflow這些屬性可能導致節點成為一個BFC
2. BFC容器內的兩個子節點的上下間距會重疊，左右方向上節點會覆蓋前面的浮動節點，但內容不覆蓋，形成環繞效果，且浮動元素可影響整個BFC的高度。
   由此，對于1，我們可以簡單的設置top或者bottom的overflow屬性為hidden，使其成為獨立的BFC,就可以避免發生上下間距重疊的現象；對于2的文字環繞效果，正是因為處于同一個BFC中，right結構與BFC的左邊相接觸，因此覆蓋了左側浮動元素，而BFC不允許內容覆蓋，因此形成了環繞效果，一旦將right設置了float或者overflow等形成BFC的條件，這種環繞效果便消失了。三欄布局也是基于此原理，而overflow設置為hidden來清除浮動來防止節點高度坍塌也是依靠形成了BFC.
   至此，我們了解了這些邊距的神奇現象并不是瀏覽器的bug所致，而是CSS標準規定的實現。關于BFC的其它介紹，請見參考文獻。

參考文獻

對于BFC(block format context)理解
塊級格式化上下文（Block Formatting Context） - 寒琛
關于Block Formatting Context－－BFC和IE的hasLayout