【CSS】盒子模型中margin-bottom的传递

对于块级盒子中的子元素的margin对父盒子的影响

html:

<div class="box">
    <div class="container"></div>
</div>
<div>哈哈哈哈哈啊</div>

 css

    .box {
        width: 300px;
        height: 200px;
        background-color: #f00;
      }

      .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-top: 100px;
      }

当我们给子元素，container一个margin-top时，父元素也会跟着移动

当我们改变一点CSS

    .box {
        width: 300px;
        height: auto;
        background-color: #f00;
      }

效果不变

假如我们增加的是盒子的底部margin距离？比如

    .container {
        width: 100px;
        height: 100px;
        background-color: #0f0;
        margin-bottom: 100px;
      }

总结：当父盒子的height为auto时，子盒子设置margin-top和margin-bottom时，会传递给父盒子