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

Question

overflow:hidden的定义指出：

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

来自：http://quirksmode.org/css/css2/overflow.html

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

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

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

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

Answer 1

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

默认情况下，

p个元素有一些垂直边距。根据{{​​3}}，它会与父div的边距折叠：

  

在CSS中，两个或多个框的相邻边距（可能或   可能不是兄弟姐妹）可以组合形成单一的边缘。边距   结合这种方式据说崩溃，结果合并   保证金称为合并保证金。

     

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

     

[...]盒子的上边距和第一个流入的上边距   孩子[正在毗邻]

the spec

但是，overflow: hidden会阻止：

  

建立新块格式化上下文的元素的边距（例如   作为浮动和以外的overflow的元素不会   与流动的孩子一起崩溃。

Answer 2

您的颜色设置为段落的父级。你没有任何东西阻止父div的高度扩展到它想要的程度，所以段落边距使父高变大。

如果你要给父母一个设定的身高（18px左右）那么它会隐藏边距（和技术上的文字）

   #list li.selected {
      color: rgb(149,149,149);
      border-top: 1px solid red;
      border-bottom: 1px solid red;
      border-left: 1px solid red;
      width: 205px;
      z-index: 40;
      position: absolute;
   }

https://jsfiddle.net/gd62qmr3/3/

如果您要将颜色设置为段落，那么您将看不到边距中的背景颜色

div {
    height:18px;
}

https://jsfiddle.net/gd62qmr3/4/