overflow:hidden 清除浮动，坍塌，溢出

overflow:hidden清除浮动的作用在清除浮动中叙述；
溢出隐藏是它最普遍的功能；
坍塌：

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

.container {
    background-color:deepskyblue;
}
.div1 {
    background-color: green;
    width: 100px;
    height: 100px;
    margin-top: 40px;
}

image.png

原因：对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。

解决方案：

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

image.png

另一种解决方式：

        .container:before {
            content: '';
            display: table;
        }