overflow:hidden清除浮动原理

我们首先来看浮动造成的影响

父块没有设置指定的高宽，当子块设置为浮动（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，父容器高度自动计算

overflow:hidden清除浮动原理

我们首先来看浮动造成的影响

BFC定义

BFC布局规则：

哪些元素会产生BFC？

总结

推荐阅读更多精彩内容