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。

边界正在阻止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>

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

2 个答案: