块格式化上下文是由带边框的元素创建的吗？

Question

来自W3C 和MDN 我知道块格式化上下文是由以下之一创建的：

• 根元素或包含它的东西
• 浮动（浮动不是无的元素）
• 绝对定位元素（位置为绝对或固定的元素）
• inline-blocks（带有display: inline-block的元素）
• 表格单元格（带有display: table-cell的元素，这是HTML表格单元格的默认值）
• 表格标题（带有display: table-caption的元素，这是HTML表格标题的默认值）
• 溢出的值不是visible 的元素
• 弹性框（带有display: flex 或inline-flex 的元素）

但我对以下代码有疑问：

<div style='background:grey;border:black 1px dotted;width:400px'>
    <div style='margin:20px;background:red;'>the parent create a bfc</div>
</div>
<div style='background:grey;width:400px'>
    <div style='margin:20px;background:red;'>why?</div>
</div>

第一个 div 元素创建一个 BFC，但它们之间的唯一区别是第一个 div 有一个边框。为什么？

Answer 1

两个div 元素都没有创建自己的BFC。您的代码中绝对没有任何内容表明第一个 div 元素正在创建自己的 BFC — 仅具有边框不会导致元素建立自己的 BFC。

边界正在做的是阻止margin collapse。这意味着子元素的边距不与父元素的边距结合；它们被限制在父元素框内。

Answer 2

我完全同意@BoltClock

边界正在做的是阻止margin collapse。这意味着子元素的边距不与父元素的边距结合；它们被限制在父元素框内。

但是，如果您想按照自己的意愿解决该问题，我会在这里为您提供解决方案。只需将 overflow: hidden; 添加到您的第二个 div，它不会折叠边距。

<div style='background:grey;border:black 1px dotted;width:400px'>
    <div style='margin:20px;background:red;'>the parent create a bfc</div>
</div>
<div style='background:grey;width:400px; overflow: hidden;'>
    <div style='margin:20px;background:red;'>why?</div>
</div>