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

Question

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

• 根元素或包含它的元素
• 浮动（浮动不为无的元素）
• 绝对定位元素（位置为绝对或固定的元素）
• 内联块（带有

  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。

边界所做的就是阻止边缘崩溃。这意味着子元素的边距不会与父元素的边距合并；它们被限制在父元素框中。

Answer 2

我完全同意@BoltClock

边界所做的就是阻止边缘崩溃。这意味着子元素的边距不会与父元素的边距合并；它们被限制在父元素框中。

但是如果你想按照你想要的方式解决这个问题，我在这里给你解决方案。只需将

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>

Answer 3

我认为你被MDN误导了。

根据接受的答案，这是不正确的。我也这么认为，因为它与BFC

的定义冲突