嵌套元素外边距塌陷解决

在网页布局中经常遇到一个div盒子嵌套另一个div盒子的情况，如果两个Div同时设置一个上外边距，你会发现子div的外边距不起作用，这是外边距塌陷的问题，解决方法就是：

①：为父元素定义一个1px边框或内边距。②：为父元素设置overflow:hidden.

<div class="banner">
    <div class="bd">
                
    </div>
</div>

css
.banner{
                width: 100%;
                height: 500px;
                background: lightseagreen;
                margin-top: 50px;
                overflow: hidden;
//              或者（border：1px solid transparent）
            }
            .bd{
                width: 1150px;
                height: 400px;
                margin: 40px auto;
                background:red;