【问题标题】：Why is the left margin jumping up?为什么左边距跳起来？
【发布时间】：2026-01-18 03:15:02
【问题描述】：

我正在关注In Search of the Holy Grail，但无法理解第 3 步中实际发生的情况。

为了解决这个问题，我禁用了“左”和“右”div 的边距/偏移量。这会给你顶部的内容，然后是其他两个元素并排坐在它下面，正如我所期望的那样[参见 P1]。

然后我逐渐将“左”div 的左边距从 0px 减少到 -199px，这再次符合我的预期[参见 P2]。

但在 -200 像素（左侧元素本身的宽度）处，它会射到顶部 [参见 P3]，左边缘紧贴内容的右边缘。我原以为它会继续走下坡路。

它为什么会跳起来？如果没有关于原因的概念解释，规范中的哪里描述了该功能？

图片：

P1

P2

P3

【问题讨论】：

你使用的css代码是什么？

标签： css-float margin css

【解决方案1】：

请记住，#content 和 #left（以及 #right）都是浮动的。

由于浮动的性质，它们（或它们的内容）可能会重叠。这在this section of the spec 中有很好的描述，并且相当容易理解。如果您将负边距应用于与另一个浮动元素相邻的浮动元素，它将简单地移动到其左侧（类似于具有left 相对偏移量），超过它的兄弟。

在float property 部分，您会找到“控制浮动行为的精确规则”的列表。现在，我对浮动模型并不是 100% 熟悉，但我认为以下几点是相关的：

2。如果当前框是左浮动的，并且源文档中存在由较早元素生成的任何左浮动框，那么对于每个这样的较早框，当前框的左侧outer edge必须在右outer edge，或者它的顶部必须低于前一个框的底部。类似的规则适用于右浮动框。¹

7。一个左浮动框在其左侧有另一个左浮动框，其右外边缘可能不在其包含块的右边缘的右侧。（松散地说：左浮动可能不会突出在右边缘，除非它已经尽可能地向左。）类似的规则适用于右浮动元素。

8。浮动框必须放在尽可能高的位置。

9。一个左浮动的盒子必须尽可能的放在左边，一个右浮动的盒子尽可能的放在右边。较高的位置比更靠左/靠右的位置更受欢迎。

所以我的猜测是：-200px 的边距，正如您所说的那样，等于 #left 元素本身的宽度的负值，导致它一直浮动向上并右（而不是左）并拥抱#center元素的边缘，该元素本身也是浮动的。由于这个完整的、相等的负边距，两个元素的右边缘相互接触。因此，随着您继续增加（或减少？）负边距，您会看到 #left 元素继续向左移动。

请注意，应用于#container 元素的填充不与边距交互；即使您删除任一侧或两侧的填充，边距也会以相同的方式交互。

¹_{还要注意，在规范的链接部分的collapsing margins 部分中有一个声明，描述了负边距的行为，但这与边距无关我们这里关心的是水平的，属于浮动元素，所以不会受到折叠的影响。}

【讨论】：

肯定按照规则2，P3应该是不可能的吧？当前（紫色）框的左边缘，位于文档早期（灰色）框右边缘的左侧，并且其顶部不低于灰色框的底部。
负边距实际上将它的左边缘推到了右边，所以应用刚好足够当前框的宽度允许它紧贴“在”早先框的右边缘。因为它可以以这种方式“向上”浮动，所以我认为它是这样做的，因为规则 9 说更高的优先于更远的左侧。
负左边距不是把它的左边推到左边吗？前面的盒子是内容，它的宽度为 100%，所以它不能紧贴右边缘，因为没有空间？我理解错了什么？
正边距会将盒子的外边缘向左延伸。外边缘是指边距边界，而不是内容或边界边界。
如果我在其包含块的左边缘有一个 div，并增加该 div 的正边距，则不会向左移动。 div 的外边缘保持在包含块的左边缘，内容/边框边界向右移动。我想象边缘的方式就像 div 是船上的一个人，并用他的桨将他推离岸边，他推动的量就是边缘长度。同样，在负边距的情况下，他只是朝相反的方向推进（这将是艰难的，因为他会将自己推向陆地，但这不是重点）。

【解决方案2】：

您正在使用<h2> 标记作为左右标题，但在中心您使用的是<h1> 这就是为什么如果您想解决这个问题会遇到这个问题做一件事1 使用所有<h2> 标记作为标题和如果您想使用，请在以下课程上申请

h1
{
margin-top:10px;
}

【讨论】：

他在哪里说这是个问题？
问题开始时难以理解是什么意思