更新1

Question

在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;
}

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

Test Case

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

更新1

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

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

.table-cell元素满足此定义。那么为什么.negative-margin越过其父母的边界？

Answer 1

你的左边距正在导致内部div越过边界......

margin-left: -20px;

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

上述内容是什么意思：

HTML

CSS

更新1

1 个答案: