<分区>
我遇到过一个案例，我需要一个 child 的边距来扩展父容器。我发现分配了parent之外的空间，但是parent本身并没有展开。然后我发现通过向父级添加 overflow: hidden 可以解决这个问题。
谁能解释为什么会这样？
我发现向父级添加任何填充或边框值也可以解决此问题。
section {
background: black;
//overflow: hidden; /* toggle this */
//padding: 1px; /* or toggle this */
//border: solid 1px green; /* or toggle this */
}
div {
margin: 10px;
background: red;
}<section>
<div>
SOME CONTENT
</div>
</section>最佳答案
“为什么”的答案描述得很好且简洁 here .有一些属性可以建立“block formatting context”。即:
Floats, absolutely [and fixed] 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.
正是这种 block 格式化上下文的变化是 为什么 上面在评论中给出的解决方案对 margin 起作用的原因(以及在前面的情况下float，以下流入元素的padding)操作。
关于html - 为什么 child 的垂直边距不扩展其父容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11668360/