【问题标题】：Why in this scenario, a child element is crossing the borders of its parent "block formatting context"?为什么在这种情况下，子元素会跨越其父“块格式化上下文”的边界？
【发布时间】：2013-02-27 21:37:19
【问题描述】：

在How does the CSS Block Formatting Context work? 的回复中，作者提到：

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

上面一行是什么意思：

因为盒子只能是矩形，不能是不规则形状表示两个浮点数之间的新块格式化上下文（甚至旁边）不会环绕相邻的侧浮子。 内在，子框只能延伸到触摸其父母的左侧（或就在 RTL 中）边缘。

我想验证这一点，所以我创建了this JS Bin test case：

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="table-cell">
    <div class="negative-margin">
    </div>
  </div>
</body>
</html>

CSS

body {
  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;
}

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

有人可以解释一下我在这里缺少什么吗？

更新 1

有些人提到这是因为负边距而发生的。通过对上述问题的回答，我期望负边距不会将包含的元素移到其容器之外。参考：

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

.table-cell 元素满足这个定义。那么为什么.negative-margin 会越过它的父级边界呢？

【问题讨论】：

因为负边距

标签： css

【解决方案1】：

您的 margin-left 导致内部 div 越界...

margin-left: -20px;

【讨论】：

当然 :) 但是由于负边距元素位于“框格式化上下文”中，根据定义，它不应该越过其包含块的左边缘。
负边距仍会将内部div 定位在您告诉它的位置...如果您希望它切断，那么您需要在表格单元类上使用overflow:hidden;。
"9.1.2 包含块... 每个盒子都被赋予一个相对于其包含块的位置，但它不受此包含块的限制；它可能会溢出。” link
见我上面的额外评论（链接在最后），对不起，我花了一段时间才得到正确的编辑......
我假设那个stackoverflow链接的解释/解释是不正确的。我指的是这部分：内部的子框只能延伸到接触其父级的左（或 RTL 中的右）边缘。