.container{

       background-color: black;

            }

 .div1{

       background-color: aqua;

       width: 100px;

       height: 100px;

       }

 .div2{

        background-color: red;

        width: 100px;

        height: 100px;

      }

 <div class="container">

     <div class="div1"></div>

     <div class="div2"></div>

 </div>

A.父级固定高度，使用overflow：hidden隐藏溢出

当父div拥有固定的高度时，比如height:500px,我们使用overflow:hidden来隐藏溢出。

溢出定义：

当使用div+css布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div，默认情况下，父div的高度是auto——它可以被子div任意的撑大。

然而父div也可以有固定的高度(或宽度)，比如height:500px，那么如果子div的高度超过了这个值，在默认情况下，子div会超出父div的束缚，这就是溢出。

B.父级高height:auto时,使用overflow：hidden清除浮动

当父元素的高height:auto时，我们使用overflow：hidden清除浮动.

.container{ background-color: black; overflow:hidden;}

但实际上是这样的（这是开发人员工具下的效果）：

CSS中存在一个margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，

所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。

 

但对于父块DIV内含子块DIV的情况，就会按另一条CSS惯例来解释了，那就是：对于有块级子元素的元素（父元素）计算高度的方式，如果父级元素元素没有上下边框和填充，那其高度就是第一个子元素顶部和底部边框边缘之间的距离。

 

解决父子DIV中顶部margin cllapse的问题，需要给父div设置：

（1）添加边框，当然可以设置边框为透明;

（2）为父DIV添加padding，或者至少添加padding-top;

此外，还可以通过为父div添加overflow:hidden解决这个问题：

.container{

    background-color: black;

    overflow: hidden;

}

　

---

经验：

overflow:hidden的用法在溢出和清除浮动上主要针对父div是否有固定的高度加以区分。它还额外肩负了解除坍塌的重任。