2

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

  • 根元素或包含它的东西
  • 浮动（浮动不是无的元素）
  • 绝对定位元素（位置为绝对或固定的元素）
  • 内联块（带有 的元素display: inline-block）
  • 表格单元格（带有 的元素display: table-cell，这是 HTML 表格单元格的默认值）
  • 表格标题（带有 的元素display: table-caption，这是 HTML 表格标题的默认值）
  • 溢出的值不是visible
  • display: flex弹性盒子（带有or的元素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 有一个边框。为什么？

4

2 回答 2

2

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

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

于 2013-05-05T05:30:36.077 回答
1

我完全同意@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>
于 2013-05-05T06:04:33.907 回答