为什么子垂直边距不扩展父容器？答案

【问题标题】：Why don't child vertical margins expand parent container?为什么子垂直边距不扩展父容器？
【发布时间】：2012-07-24 23:37:24
【问题描述】：

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

谁能解释为什么会这样？

更新：

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

【问题讨论】：

标签： css margin

【解决方案1】：

截至 2018 年 7 月的小幅更新。Mozilla 有一个 great article 处理此问题，原因是保证金崩溃。

总结：父母和第一个孩子的边缘可能会崩溃。他们最终就好像父级有结果边距。

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

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

【讨论】：

【解决方案2】：

“为什么”的答案描述得很好，很简洁here。某些属性会建立“block formatting context”。即：

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

正是这种块格式化上下文的变化，为什么上面给出的 cmets 中给出的此类解决方案适用于 margin（在前面的 float 的情况下，@以下流入元素的 987654326@) 运行。

【讨论】：

【解决方案3】：

【讨论】：