0

在 CSS Block Formatting Context 如何工作的答案中？作者提到：

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

上面一行的意思是：

因为一个盒子只能是矩形而不是不规则形状，这意味着两个浮动（甚至一个旁边）之间的新块格式化上下文不会环绕相邻的侧浮动。内部的子框只能延伸到接触其父母的左（或 RTL 中的右）边缘。

我想验证这一点，所以我创建了这个 JS Bin 测试用例：

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越过它的父母的边界呢？

4

1 回答 1

0

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

margin-left: -20px;
于 2013-02-27T13:26:28.843 回答