overflow:hidden

作用：overflow:hidden可以隐藏超出部分，清除浮动，解决塌陷

    
    
    


    

        
1
        
2
    
  

原始图

.wrapper{
    // 给父元素添加overflow，子元素超出部分就会被隐藏了
    overflow: hidden;
}

超出隐藏

清除浮动

// 父元素不设置高度，子元素浮动时，给父元素添加overflow:hidden就会清除浮动
.wrapper{
    // 给父元素添加overflow，清除浮动
    overflow: hidden;
}

参考：https://www.jianshu.com/p/1069f9cf02db
原理：超出部分要裁切隐藏掉，如果浮动的元素不占据普通流的位置，那么没有被计算在内的浮动元素就会被裁切掉，就可能会裁切掉float，所以在没有明确设定父元素高的情况下，父元素需要计算里面内容的全部高度（浮动元素也计算）来确定在什么地方hidden，所以浮动元素的高度就被计算进去，顺便清除了浮动。
解决塌陷
当我们给父元素的第一个子元素设置margin-top时，按理来说应该是以下的效果：

理想效果

实际效果是如下样子：

实际 效果

从中看到：其实把父元素顶下去了。
解决方案：给父元素添加overflow:hidden;，理由是加了overflow后就成为BFC元素了

浮动塌陷问题及解决方式

    
1
    

        
111
        
222
        
333
    

.content1{
    width: 100px;
    height: 20px;
    background-color: red;
}
.content2{
    width: 400px;
    background-color: green;
    /*overflow: hidden;*/
}
.content2 div{
    background-color: blue;
    border: 1px solid #000;
    height: 30px;
}

塌陷

当放开右侧.content2的overflow:hidden时，.content2就成为一个BFC了，这样就不会和浮动元素重叠，从而解决了塌陷问题

解决塌陷

BFC
BFC是block formatting context，可直译为块格式化上下文，定义了一块独立的渲染区域，规定了内部元素的渲染规则，渲染效果不受外部环境的干扰。

规则：

• 1.内部的块元素垂直放置，一个一个的
• 2.块元素垂直方向的距离由margin决定，相邻元素的margin会重叠
• 3.每个元素的左外边距，与包含块的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
• 4.BFC区域不会与float区域重合
• 5.BFC是页面上的隔离的独立容器，容器里的子元素不会影响外部的元素，外部也不会影响里面的元素
• 6.计算BFC的高度时，浮动元素 也计算在内

给元素添加一下style时，该元素就会成为一个BFC元素

• body 根元素
• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cells、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)