Html '的影响；溢出'；除'以外的值；可见'；关于块格式上下文

这个问题类似于（有一个很好的答案），尽管我的问题与浮动问题无关

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

#父级{
背景：rgba（255,0,0,0.1）；
}
#孩子{
利润率：30px0；
填充：20px；
背景：rgba（0,255,0,0.1）；
}

福

这澄清了我偶尔遇到的一个关于身高的问题。看起来父元素的高度不是从子元素的边距计算的

调整小提琴：

边距将应用于子对象，但父对象的高度不受影响。添加溢出或边框会导致高度调整。有时我确实会思考为什么父元素不总是扩展到包含子元素

看起来很奇怪，但是

在父母身高上有相互冲突的规则可能会很复杂。它会影响许多浏览器布局，例如父位置相对子位置设置为绝对，或溢出自动/隐藏，可能还会影响许多其他布局算法。我想这会不必要地使浏览器的布局引擎复杂化，就像css选择器的特殊性有时会成为我们的主要痛苦一样

---

您可以向父对象添加填充以调整其高度，这更直观（不是吗？）

正如我在对您链接的问题的回答中所述，

溢出

值（而非

可见

值）导致新块格式上下文的主要原因是与浮动相关的实现限制，即使溢出的概念似乎并不立即与浮动有关系

虽然浮动和折叠边距之间的关系非常简单（从未发生过），但边距不能通过元素的边界折叠，并且具有

溢出

的值，这一事实只不过是此更改的一个副作用，因为页边距定义为不会通过任何建立块格式上下文的框折叠，如中所述。我引述：

• 建立新块格式上下文的元素（例如浮动和具有“溢出”而非“可见”的元素）的边距不会与其在流中的子元素一起塌陷

这包括浮点数和具有

溢出

值的元素。溢出本身实际上对利润率没有任何直接影响

如果父元素和子元素都是参与相同块格式设置上下文的块级元素，则默认情况下它们将折叠，除非有以下情况：

• 如果流内块元素没有上边框、上填充且子元素没有间隙，则流内块元素的上边距将与其第一个流内块级别子元素的上边距折叠

• “高度”为“自动”且“最小高度”为零的流入块框的底部边距将与其最后一个流入块级别子框的底部边距折叠，前提是该框没有底部填充和底部边框，并且子框的底部边距没有与具有间隙的顶部边距折叠

---

这解释了为什么在您尝试阻止页边距折叠之前，父级的背景不会延伸。

在第一个示例中，父级和子级的顶部和底部页边距折叠。粗略地说，子级的30px边距与父级的零边距相结合，两者中较大的边距应用于父级：

在CSS中，两个或多个框（可能是或 可能不是同级）可以合并形成单个页边距。边距 这种结合方式被称为崩溃，由此产生的结合 边距称为折叠边距

在同一文档中，解释了溢出的影响（如第二个示例所示）：

建立新块格式上下文（例如 由于浮动和具有“溢出”而非“可见”的元素 和他们的孩子一起崩溃

---

我相信（从记忆中）除了“可见”之外的任何东西都会生成一个新的子布局（最明显的效果通常是块中的z索引是自包含的）。如果不这样做，就会产生边距折叠的效果，使背景变小（内部子对象的边距与框中的边距以及它接触的任何对象合并）。我想知道，除非强制不折叠，否则默认情况下边距是否不透明。而且，它不仅仅是溢出的。

边框也会使它出现。好问题。至于为什么在正常情况下页边距合并，这是因为通常情况下这是您想要的（例如，段落页边距与页眉页边距合并，导致两者之间的页边距最大，而不是相加）。TylerH（以及在外部元素上设置填充）在两个页边距之间放置某些内容的边界效果，迫使它们不能合并。有关更多详细信息，请参阅：哦，我了解页边距剪裁的正常情况：）如何找到这些问题！谢谢你，我计划在某个时候做一个跟进，并在W3C/Moz列表上询问这个问题，如果我有chance@Ian克拉克：作为一些标签维护的一部分，我正在研究一些CSS2.1规范问题，碰巧遇到了你的问题：）@Ian Clark：是的，这绝对值得问他们，同样，只有CSSWG能够回答为什么建立一个新的BFC会以这种方式阻止保证金崩溃。看见
#parent { background: #555;}
#child { margin:200px; background: #ccc; }