html – 块格式化上下文中“溢出”值除“可见”以外的影响

我最近在尝试将边距应用于块级元素的唯一子节点时遇到了一些麻烦：

#parent {
    background: rgba(255,0.1);
}

#child {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0,255,0.1);
}

<div id="parent">
    <div id="child">Foo</div>
</div>

虽然应用了保证金,但父母的背景却不是.除非在#child之前和之后添加兄弟姐妹,否则这仍然是正确的,或者(在我看来更有趣),设置除了可见之外的任何值的溢出.这是相同的示例,但具有溢出值：

#parent {
    background: rgba(255,0.1);
    overflow: auto;
}

#child {
    margin: 30px 0;
    padding: 20px;
    background: rgba(0,0.1);
}

<div id="parent">
    <div id="child">Foo</div>
</div>

从CSS2.1 Section 9.4.1 – Block Formatting Contexts开始,我发现了以下内容：

Floats,absolutely positioned elements,block containers (such as inline-blocks,table-cells,and table-captions) that are not block boxes,and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

在这个例子中,我真的很难理解“溢出而不是可见”逻辑背后的基本原理.在这种情况下,边缘似乎没有被削减,因为唯一要改变的是背景.有人可以证明为什么溢出值：可见会产生这种情况吗？