magin边界塌陷与重叠

magin边界塌陷问题：

margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。

    父元素没有设置margin-top，而子元素设置了margin：50px 70px;可以看出，父元素也一起有了上边距。

造成这种原因是

父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.

解决这类问题的办法是：

    1.给父元素设置外边框（border）或者内边距（padding）

    2.触发BFC

        1.子元素或者父元素的float不为none

        2.子元素或者父元素的position不为relative或static

        3.父元素的overflow为auto或scroll或hidden

        4.父元素的display的值为table-cell或inline-block

---

还有一种是垂直方向上兄弟级边界重合问题：

---

解决方案

        1.只设置其中一个元素的margin值即可

        2.给两个元素都设置父元素，触发BFC