本文**：
margin塌陷問題和合併問題都只對垂直方向有效
margin塌陷問題
這個問題是乙個經典的瀏覽器核心問題。具體表現是當兩個元素巢狀到一起時，外層盒模型的margin-top取兩個元素中margin-top較大的值。
因為在正常的情況下內層元素是相對於外層元素進行移動，但是這時內層元素卻相對於整個文件進行移動，好像外層元素沒有「棚頂」一樣，因此叫margin塌陷問題。
margin塌陷問題觸發示例：
<div
class
>
<
div
class
= "content"
>
div>
div>
width:200px;
height:200px;
background-color:red;
margin-top:100px;
}.content
我們可以看到：此時的外層元素相對於整個文件的 margin-top = 150px;
margin塌陷問題解決方法：
1、給外層元素認為加乙個「棚頂」:border。
這種方法雖然能夠解決問題，但是在日常開發中我們不使用它，因為他在外觀上對元素進行了改變。
2、bfc–block format context 塊級格式化上下文
每乙個元素都是乙個盒子，每乙個盒子都符合一定的渲染規則。我們可以通過觸發bfc方式，讓特定盒子裡的渲染規則發生變化。我們要給外層元素加乙個特定屬性來觸發bfc來解決margin塌陷問題。觸發bfc的方式有以下四種，我們可以根據實際的需求採用不同的方法。
overflow:hidden;display:inline-block;
position:absolute;
float:left;
2.margin合併問題
具體表現為兩個元素並列時，兩者相隔的外邊距取的是兩者所設定margin的最大值。
margin合併問題觸發示例：
<div
class
= 'box1'
>box1
div>
<
div
class
= 'box2'
>box2
div>
.box1
.box2
margin合併問題解決辦法：
我們仍然用bfc來解決。可以給其中乙個元素包起來，在外層元素中設定bfc渲染規則。此時這個元素的渲染規則就改變了，就能夠解決這個問題。
一般margin合併不解決，margin塌陷要解決
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...
margin塌陷和margin合併問題及解決方案
父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margin會取其中最大的值.正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位.但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣.margin塌陷解決方法1.給父級設...
margin塌陷以 及 margin合併
3.乙個空元素，沒有border和padding 3.margin合併解決方法 總結 margin 合併就是，當兩個垂直margin相遇時，它們將形成乙個margin。合併的margin等於兩個發生合併的margin中的較大者。合併條件 注意 普通文件流中塊級元素 垂直margin 沒有border...