Css 为什么在这种情况下，子元素会跨越其父元素的边界；块格式上下文“；？

在对提交人的答复中提到：

在块格式上下文中，每个框的左外边缘都与 包含块的左边缘（对于从右到左的格式，右 边缘（触摸）

上面这一行的意思是： 因为长方体只能是矩形，不能是不规则形状 表示两个浮点（甚至两个浮点）之间的新块格式上下文 在一个旁边）不会缠绕相邻侧浮子<坚强>内心， 子框只能延伸到其父母左侧（或左侧） 右上角（RTL）边缘

我想验证一下，所以我创建了：

HTML 但是，可以看到，所包含的元素正在穿过其容器的左边缘：

有人能解释一下我遗漏了什么吗

更新1 有人提到这是因为负利润率。按照上述问题的答案，我希望负边距不会将包含的元素移出其容器。参考：

浮动、绝对定位元素、块容器（例如 内联块、表格单元格和表格标题）不属于块的 框，并用“溢出”而不是“可见”来阻止框（除了 将该值传播到视口后）建立新的 阻止其内容的格式化上下文

---

而

.table cell

元素满足此定义。那么，为什么

.negative margin

会跨越其父级边界？

您的左边距会导致内部div跨越边界

margin-left: -20px;

---

由于负边距，当然：）但由于负边距元素位于“框格式上下文”中，根据定义，它不应该穿过其包含块的左边缘。负边距仍会将内部

div

放置在您告诉它的位置。。。如果要将其切断，则需要使用

overflow:hiddenbody {
  padding: 50px;  
}

.table-cell {
  display: table-cell;
  border: 1px solid black;
  width: 200px;
  height: 200px;  
}

.negative-margin {
  border: 1px solid blue;
  width: 100px;
  height: 100px;
  background: #666;
  margin-left: -20px;
}

margin-left: -20px;