BFC的外邊距摺疊，BFC距摺疊

BFC的外邊距摺疊，BFC距摺疊
 問題描述：　　在子項目裡設定margin-bottom，該margin-bottom的值沒有作用於子項目，而會”轉移”給外層div，如下所示。

        <div style="background:red;">            父元素的內容佔據            <div style="margin-bottom:20px;background:blue;">             子項目的內容佔據佔據               </div>        </div>        <div style="background:yellow">            這是下一行的內容        </div>

　　效果

　　為什麼會產生這種現象呢，究其根本乃是因為BFC的外邊距摺疊，什麼是外邊距摺疊呢。  BFC的外邊距摺疊　　兩個相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以合并成一個單獨的外邊距。這種合并外邊距的方式被稱為摺疊。什麼情況下會引起外邊距摺疊。觸發條件：　　必須是處於常規文檔流的塊級盒子，並且處於同一個BFC中。　　沒有將他們分開的東西，如padding、border、clearance。　　在垂直方向上是相鄰的，相鄰的情況有以下幾種　　　　1、元素的margin-top與其第一個處於常規文檔流中的子項目的margin-top　　　　2、高度自動的元素的margin-bottom與其最後一個處於常規文檔流中子項目的margin-bottom　　　　3、元素的margin-bottom與其下一個處於常規文檔流轉紅的兄弟元素的margin-top　　　　4、元素的margin-top與其margin-bottom，但需滿足自身沒建立BFC、min-height為0、不包含正常文檔流的子項目、高度為0或者auto。解決方案：　　要避免這個問題，可以讓觸發條件不成立，從而解決問題，所以有以下幾種解決方案　　　1、給父元素加高度或者設定padding值，將他們分開。　　　2：把父元素變成一個 block formating context ，也就是建立一個BFC，根據BFC的定義，下面是可選的方法　　　　a、float: left/right　　　　b、position: absolute　　　　c、display: inline-block/table-cell　　　　d、overflow: hidden/auto