盒子模型塌陷解决办法

一、什么叫盒子模型塌陷

•  当子元素设置外边距，导致父元素连带向下，就会导致盒子模型塌陷。
• 例如这种情况：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: tomato;
        }
        #btn{
            margin-top: 20px;
        }
</style>
<div class="box">
        <div id="btn">容器</div>
</div>

 

二、解决盒子模型塌陷的方法：

1.给父容器设置上边线 

border-top: 1px solid transparent;

.box{
       width: 100px;
       height: 100px;
       background-color: tomato;
       border-top: 1px solid transparent;
   }

2.给父元素设置内边距

padding: 1px;

.box{
       width: 100px;
       height: 100px;
       background-color: tomato;
       padding: 1px;
     }

3.给父元素设置超出部分隐藏属性

overflow: hidden;

.box{
       width: 100px;
       height: 100px;
       background-color: tomato;
       overflow: hidden;
    }