溢出:隐藏在div标签上影响背景颜色

Question

国家的定义overflow:hidden:

the overflowing content is completely hidden, not accessible to the user.

但我对我的js小提琴这种行为感到好奇:https: //jsfiddle.net/gd62qmr3/2/

我注意到的一件事是,在将溢出设置为隐藏后,它为边距赋予了颜色？

<div style="background-color:green;overflow:hidden;">
<p>test</p>
</div>

我想知道为什么会出现这种行为？如果没有溢出,精确的块元素将具有绿色背景颜色,但是溢出将为其边缘提供背景颜色.

Answer 1

那是因为overflow: hidden影响保证金崩溃.

p元素默认有一些垂直边距.根据规范,它与父母的边缘崩溃div:

在CSS中,两个或多个框(可能是也可能不是兄弟)的相邻边距可以组合形成单个边距.据说以这种方式组合的边距会崩溃,因此产生的合并边距称为折叠边距.

相邻的垂直边距崩溃_{^{,除了[...不相关]}}

[...]一个盒子的顶部边缘和第一个流入的孩子的顶部边缘[相邻]

但是,overflow: hidden防止:

建立新块格式化上下文的元素边距(例如浮点数和overflow其他元素除外visible)不会因其流入子节点而崩溃.