CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？

泻药

不说BFC什么的了

就“分析”下本意

overflow:hidden 的意思是超出的部分要裁切隐藏掉

那么如果 float 的元素不占普通流位置

普通流的包含块要根据内容高度裁切隐藏

如果高度是默认值auto

那么不计算其内浮动元素高度就裁切

就有可能会裁掉float

这是反布局常识的

所以如果没有明确设定容器高情况下

它要计算内容全部高度才能确定在什么位置hidden

浮动的高度就要被计算进去

顺带达成了清理浮动的目标

同理

overflow 非默认值

position 非默认值

float 非默认值

等都是遵循这个布局计算思路

随便瞎扯

闪

BFC 没有什么好说的，这只是机制，不解答题主的疑问。在 BFC 语境下，题主的问题其实就转换为了为啥 overflow: hidden 就是 BFC。

要说一点历史了。

实际上 CSS 1 是没有 overflow 属性的（float 属性已经有了）。overflow（以及许多复杂的 layout 机制）是 CSS 2 加入的。而 CSS 2 以 bug 众多，实现不一而著称。在原始的 CSS 2 中，overflow: hidden 时 float 的行为其实语焉不详。如果你看一下 CSS 2.1 的附录C——变更/错误/澄清和后续修改，搜索一下 overflow 关键字，会看到几十处相关修订。

注意 CSS 2.1 实际上很多地方是对既有浏览器的实现结果进行倒推的机制合理化。虽然我没有拿老浏览器来测试，不过推断 overflow 的行为应该也有许多地方是这样来的。

站在今天审视 CSS ，也许使用一个单独的属性来构建 BFC 也是一种可能性（这样当未开启 BFC 时，overflow: hidden 可以呈现你描述的效果），不过历史选择了一条类似 IE 之 hasLayout 属性的道路——即由某些其他显式的属性触发一个隐式的超级属性，该超级属性可以决定其他属性的实际意义。

最终的结果就是你看到的，overflow 取值只要不是 visible ，就会开启这个超级属性（BFC），此超级属性反过来决定了 height: auto 是如何计算的（参考

的答案）。从 BFC 的机制设计来看，把 float 元素纳入尺寸计算（即所谓父块包裹子块）是合理的。

至于你想要的效果，未来 clip-path 属性（

）将可提供。