CSS Spec：子元素超出块格式上下文中的左边缘

Question

我正在阅读CSS Spec 2.1。关于块格式化上下文，我发现：

  

在块格式化上下文中，每个框的左外边缘都接触到   包含块的左边缘（从右到左格式化，右边   边缘触摸）。 ......，除非盒子   建立一个新的块格式化上下文（...）。

在此示例JSFiddle中，由于float:left，父元素形成了新的块格式化上下文。它的子元素有position:relative，它不会形成新的BFC。但是，孩子与父母重叠。这种行为似乎与规范冲突：

  

在块格式化上下文中，每个框的左外边缘都接触到   包含块的左边缘

有人可以帮忙解释一下吗？

Answer 1

您正在使用position: relative将儿童与其原始的静态位置抵消。来自section 9.4.3（强调我的）：

  

根据正常流量布置框或浮动后，它可能会相对于此位置移动。

这意味着布局在相对定位之前发生，这意味着就布局而言，它是静态位置，而不是受这些规则约束的相对位置。

删除position: relative; left: -50px，您可以看到the child element's left outer edge does indeed touch the parent's left content edge（同样适用于右侧，但仅因为子宽度为自动）。