css - 为什么子垂直边距不扩展父容器？

Question

我遇到了一个案例，我需要一个孩子的边距来扩展父容器。发现parent外面的空间分配了，但是parent本身并没有展开。然后我发现通过向父级添加“溢出：隐藏”可以解决这个问题。

任何人都可以解释为什么会这样吗？

更新：

我发现向父级添加任何填充或边框值也可以解决此问题。

更新示例

Answer 1

“为什么”的答案在这里得到了简洁明了的描述。有一些属性可以建立“块格式化上下文”。即：

浮动、绝对 [和固定] 定位元素、不是块框的块容器（例如内联块、表格单元格和表格标题），以及具有“溢出”而不是“可见”的块框（除非值已传播到视口）为其内容建立新的块格式化上下文。

正是这种块格式化上下文的变化，这就是为什么上面在评论中给出的这些解决方案适用于margin（以及在前面的情况下float，padding后面的流入元素）如何运作的原因。

Answer 2

我认为折叠边距是原因：http ://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 3

截至 2018 年 7 月的一个小更新。Mozilla 有一篇关于这个问题的精彩文章，这是由于保证金崩溃。

摘要：父母和第一个孩子的边缘可能会崩溃。他们最终好像父母有结果保证金。

父母和第一个/最后一个孩子

如果没有边框、内边距、内联部分、创建的块格式化上下文，或者没有将块的 margin-top 与其第一个子块的 margin-top 分开的间隙；或者没有边框、填充、内联内容、高度、最小高度或最大高度来将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。