为何使用overflow:hidden创建BFC后，父子元素仍存在外边距重叠？

最小复现代码 #

CSS

.outer {
  background: lightblue;
}

.inner {
  background: lightgreen;
  overflow: hidden; /* Triggers BFC */
  margin: 30px;
}

p {
  margin-top: 30px;
}

HTML

<body>
  <div class="outer">
    <div class="inner">
      <p>Paragraph inside a BFC.</p>
    </div>
  </div>
</body>

疑问 #

为.inner设置overflow: hidden创建BFC后，按预期应该阻止它与父元素.outer的外边距重叠，但实际在Chrome DevTools中查看，.inner的上边距仍向上溢出，使得.outer看起来有上边距（但.outer本身并没有设置外边距）。

解答 #

你搞反了BFC阻止外边距折叠的适用场景——给子元素.inner加overflow: hidden创建BFC，只能解决子元素内部的外边距折叠，或者子元素和相邻兄弟元素的外边距折叠，但没法阻止它和父元素.outer的外边距重叠。

当前出现重叠的核心原因是父元素.outer满足了外边距折叠的触发条件：

• 父元素没有设置边框（border）、内边距（padding）来阻断折叠
• 父元素自身没有创建BFC
• 父元素与子元素之间没有浮动、绝对定位等能打断折叠的元素

这种情况下，子元素的外边距会“溢出”到父元素外部，形成视觉上父元素有外边距的效果。

要解决这个问题，有两种简单可行的方法：

• 给父元素.outer创建BFC，比如添加overflow: hidden属性
• 给父元素添加极小的边框或内边距，比如border-top: 1px solid transparent或者padding-top: 1px，通过物理间隔阻断外边距折叠

内容的提问来源于stack exchange，提问作者meallhour