我们首先来看浮动造成的影响
父块没有设置指定的高宽，当子块设置为浮动（float）时，原本包裹子块的父块高度塌陷，子块内容会溢出。这时给父块设置overflow:hidden就能清除浮动造成的影响，使父块重新包裹子块。
那么问题来了，overflow:hidden的意思是超出的部分要裁切隐藏掉，而在上述问题中不但没有隐藏超出部分，反而让父块有了高度，明显违反了overflow:hidden的本意啊
要解释这个问题我们必须得理解清楚BFC，BFC大家已经耳熟能详了，网上也有很多相关文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）
BFC定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
- 内容的Box会在垂直方向一个接一个地放置。
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边，与包含块的border box的左边相接触
- BFC的区域不会与float box重叠
- BFC是页面上的一个独立容器，里面的子元素不会影响到外面的元素
- 计算BFC高度时浮动元素也参与计算
哪些元素会产生BFC？
- 根元素
- float、position、display、overflow属性不为默认值
根据BFC布局规则第六条：
计算BFC高度，浮动元素也参与计算
如果不计算父块内浮动元素的高度就裁切，就很可能裁掉float box，这不符合BFC布局规则！
所以在没有明确容器高度的情况下，它要计算内容全部高度才能确定在什么位置hidden，包括浮动元素的高度，这样就达到了清除内部浮动的目标
总结
父容器height:auto,设置overflow:hidden会触发BFC这个超级属性，BFC反过来决定了height:auto具体如何计算，因BFC机制中把浮动元素高度也纳入计算范围，所以overflow:hidden不隐藏反而让父块有了高度是合理的。顺便清除了浮动的影响。
示例代码：
<style>
.par {
border: 5px solid blueviolet;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
未清除浮动，父容器高度为0
清除浮动后
.par {
overflow: hidden;
}
overflow:hidden，父容器高度自动计算
