margin重叠

通常特性：
1.block水平元素（不包括float和absolute元素）
2.不考虑writing-mode，只发生在垂直方向（margin-top、margin-bottom）

---

三种情境：
1.相邻的兄弟元素
2.父级和第一个/最后一个子元素
3.空的block元素 自己和自己

---

1.相邻的兄弟元素 margin重叠

---

2父级和第一个/最后一个子元素

margin-top：
father 0，son 80，重叠一下，80
father 80，son 80 ，重叠一下，80

---

2.1父子元素margin-top发生重叠，原因？如何取消重叠？

1.父元素非块状格式化上下文元素

2.父元素没有border-top设置

3.父元素没有padding-top值

4.父元素和第一个子元素之间没有inline元素（图片。。文字。。。）分割

margin-bottom重叠的原因：
1.父元素非块状格式化上下文元素
2.父元素没有border-bottom设置
3.父元素没有padding-bottom值
4.父元素和最后一个子元素之间没有inline元素分割
5.父元素没有height、min-height、max-height限制

---

3.空block元素margin重叠

---

margin重叠的计算规则

1.正正取大值

2.正负值相加
3.负负最负值

---

垂直布局时，margin-top和margin-bottom都使用

http://www.imooc.com/video/12103