【css外边距塌陷】外边距合并问题解决方案

1.父子元素之间的外边距margin合并问题(外边距塌陷)

<!-- 结构 -->
<div class="box">
    <div class="b1"></div>
</div>
<!-- 样式 -->
.box {
            width: 800px;
            height: 500px;
            background-color: orange;
        }

        .b1 {
            margin-top: 20px;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

解决方法：
父元素添加代码段：

  /*border: 1px solid transparent; !*方法1*!*/
/*float: left; !*方法2*!*/
/*position: absolute; !*方法3*!*/
/*padding: 1px; !*方法4*!*/
/*display: inline-block; !*方法5*!*/
/*overflow: hidden; !*方法6*!*/
/*overflow: auto; !*方法7*!*/      

2.兄弟元素之间的外边距合并问题

<!--结构-->
<div class="box1">
    <div class="b2"></div>
    <div class="b3"></div>
</div>

<!--样式-->
.b2,
.b3 {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
}


.b2 {
            background-color: pink;
            margin-bottom: 20px;
        }
        /* b2 margin-bottom 20px; b3 margin-top 30px ;本应该b2 和 b3 间隔50px */
        /* 实际 只有 30px 因为外边距margin发生了合并 */
        .b3 {
            margin-top: 30px;
            background-color: green;
        }

但实际是这样的：间隔只有 30px 因为margin发生了合并 合并后就只剩margin值较大的部分

解决方法：

<!--增加左浮动 或 转换为行内块-->
 /*float: left; !* 1.设置左浮动 解决外边距margin 合并问题呢*! */
    /*display: inline-block; !*2.转换为行内块 解决外边距margin 合并问题*!*/