在平時做項目的時候，有些時候會發生margin重疊的現象，但這種情況並不是一直都會發生，那到底什么時候會發生margin重疊呢。在網上搜索了一些資料，大致做了一些整理。
首先，會發生margin重疊的肯定是同一個BFC內的塊級元素，例如div、ul等，不是塊級元素不會發生重疊。（內聯元素是不能設置高、行高、內外邊距的，而且內聯元素只能容納文本或者其他內聯元素。）
重疊的情況大致可以分為以下幾種：
1、當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合並。
2、當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），第一個子元素的上邊距會和父元素的上邊距合並；最后一個子元素的下邊距會和父元素的下邊距合並。
3、假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合並。如果這個外邊距遇到另一個元素的外邊距，它還會發生合並。
當發生重疊的時候：
1、當兩個margin都是正值的時候，取兩者的最大值；
2、當 margin 都是負值的時候，取的是其中絕對值較大的，然后，從 0 位置，負向位移；
3、當有正有負的時候，先取出負 margin 中絕對值中最大的，然后，和正 margin 值中最大的 margin 相加。
有時候我們並不希望margin會合並，因為不期望的合並會給頁面布局帶來混淆。前面說過，會發生合並的是同一個BFC內的塊級元素，也就是說屬於同一個BFC的兩個相鄰塊級元素的margin會發生重疊。那么什么是BFC，怎么生成BFC。
以下內容大多摘自：http://www.cnblogs.com/dojo-lzz/p/3999013.html。
BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。
滿足下列CSS聲明之一的元素便會生成BFC。
1、根元素
2、float的值不為none
3、overflow的值不為visible （這一條不知道為什么對於上下元素的時候不起作用。）
4、display的值為inline-block、table-cell、table-caption
5、position的值為absolute或fixed
瀏覽器對於BFC這塊區域的約束規則如下：
1、內部的Box會在垂直方向上一個接一個的放置
2、垂直方向上的距離由margin決定。（完整的說法是：屬於同一個BFC的兩個相鄰Box的margin會發生重疊，與方向無關。）
3、每個元素的左外邊距與包含塊的左邊界相接觸（從左向右），即使浮動元素也是如此。（這說明BFC中子元素不會超出他的包含塊，而position為absolute的元素可以超出他的包含塊邊界）
4、BFC的區域不會與float的元素區域重疊
5、計算BFC的高度時，浮動子元素也參與計算
6、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面元素，反之亦然
以上這些約束就可以解釋css中的一些規則了。
Block元素會擴展到與父元素同寬，所以block元素會垂直排列
垂直方向上的兩個相鄰DIV的margin會重疊，而水平方向不會(此規則並不完全正確)
浮動元素會盡量接近往左上方（或右上方）
為父元素設置overflow：hidden或浮動父元素，則會包含浮動元素（根本原因在於創建BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題）
為了防止發生margin重疊，只需要把發生重疊的兩個元素之一生成BFC就可以了，這只是BFC其中一個作用。BFC在css布局中有很多情況可卡因起作用，例如:
1、對於上下相鄰的兩個元素，只要把其中一個設置為display:inline-block。按理論來說，將其中一個設置為overflow:hidden，也可以達到消除重疊的效果，結果卻沒有，不知道為什么。
2、給父元素設置border或者padding，子元素的margin就不會與父元素重疊。例如margin-top。
給父元素設置 overflow: hidden或者display: inline-block或者float: left或者position: absolute，子元素的margin就不會與父元素重疊。
給子元素設置display: inline-block，子元素的margin就不會與父元素重疊。
3、當父元素沒有設置寬高，子元素浮動的時候，會使得父元素高度塌陷，這時候只需要給父元素設置overflow: hidden或者display: inline-block或者float: left或者position: absolute。都可以解決這個問題。根本原因在於創建BFC的元素，子浮動元素也會參與其高度計算，即不會產生高度塌陷問題
4、與浮動元素相鄰的已生成BFC的元素不能與浮動元素相互覆蓋。利用該特性可以作為多欄布局的一種實現方式。overflow: hidden或者display: inline-block或者float: left或者position: absolute。
.left{
background:pink;
float: left;
width:180px;
}
.center{
background:lightyellow;
overflow:hidden;
}
.right{
background: lightblue;
width:180px;
float:right;
}
最后感謝http://www.cnblogs.com/dojo-lzz/p/3999013.html的作者，學到了很多的知識，嘻嘻。