解决外边距塌陷

外边距塌陷

当一个父元素里面两个块级元素上下相遇时 上方的子元素 如果有margin-top的话 将的不到体现
如图：

这就是外边距塌陷 它会影响页面布局
解决的方法有 ：
方法一：

css
.father{
width: 90%;
height: 600px;
background-color: #1d90ff;
border: 1px solid #999999; /给父元素设置边框和内边距也可以解决塌陷的问题/

    }
    .box1{
    /*子元素样式*/
        width: 100px;
        height: 80px;
        background-color: red;
        margin: 50px;
    }``

给父元素 加上边框 或内边距就能解决 外边距塌陷问题
方法二：

 .father{
            width: 90%;
            height: 600px;
            background-color: #1d90ff;
            overflow: hidden;   /*防止溢出*/
        }
        .box1{
            width: 100px;
            height: 80px;
            background-color: red;
            margin: 50px;
        }

给父元素 加上 overflow: hidden; 也可以解决问题