CSS解决外边距重叠和高度坍塌

什么是外边距重叠：

当给子元素设置margin-top的时候 父元素会跟着移动

解决方法一

    触发BFC 以下条件满足其一

    float的值不为none

    overflow的值不为visible。

    position的值不为relative和static。

    display的值为table-cell, table-caption, inline-block中的任何一个。

解决方法二

利用伪元素在父元素之前

/* 上外边距溢出 /

.div-parent::before {

display: table;

content: "";

}

/

* 下外边距溢出 */

.div-parent::after {

display: table;

content: "";

}

---

什么是高度坍塌

当父元素的高度是由子元素给撑开的时候，一旦子元素浮动脱离文档流，父元素的高度就没了

解决方法一

    触发BFC 以下条件满足其一

float的值不为none

overflow的值不为visible。

position的值不为relative和static。

display的值为table-cell, table-caption, inline-block中的任何一个。

解决方法二

利用伪元素 在父元素最后

  .box::after{   ****

            content: '';

            display: block;

            clear: both;

        }

        .box::before{

            content: '';

            display: block;

            clear: both;

        }