CSS-overflow:hidden；

overflow:hidden;的作用

1.将超出标签范围的内容裁剪掉

2.清除浮动

给第一个盒子设置overflow: hidden;属性

.box1{
      background-color: red;
      /*margin-bottom: 10px;*/
      overflow: hidden;
    }

3.让里面的盒子设置margin-top之后外面的盒子不被顶下来

如果两个盒子嵌套，当里面的盒子设置了 margin-top: 20px; 外面的盒子也会被顶下来。

那么如果不想外面的盒子也被顶下来，有两种方法:
第一种方法是给外面的盒子设置一个边框border: 1px solid #000;
第二种方法就是给第一个盒子设置overflow: hidden;

.box1{
      width: 200px;
      height: 200px;
      background-color: red;
      border: 1px solid #000;
      /*overflow: hidden;*/
    }
.box2{
      width: 100px;
      height: 100px;
      background-color: blue;
      margin-top: 20px;
    }

<div class="box1">
    <div class="box2"></div>
</div>