我正在关注In Search of the Holy Grail，但无法理解步骤 3 中实际发生的情况。
为了解决这个问题，我禁用了“左”和“右” div 的边距/偏移量。这为您提供了顶部的内容，然后是其他两个元素并排坐在它下面，正如我所期望的那样[参见 P1]。
然后，我逐渐将“左”div 的左边距从 0px 减少到 -199px，这再次达到了我的预期[参见 P2]。
但是在 -200px（左侧元素本身的宽度）处，它会向上射到顶部[参见 P3]，左边缘靠在内容的右边缘。我原以为它会继续走下坡路。
为什么会跳起来？如果没有关于为什么的概念解释，它在规范中的哪里描述了该功能？
图片：
请记住，#content和#left（以及#right）都是浮动的。
由于浮动的性质，它们（或它们的内容）可能会重叠。这在规范的这一部分中得到了很好的描述，并且相当容易理解。如果您将负边距应用于与另一个浮动元素相邻的浮动元素，它将简单地向其左侧移动（类似于具有left相对偏移），超过其兄弟。
在关于float属性的部分，您会找到“控制浮动行为的精确规则”的列表。现在，我对浮动模型不是 100% 熟悉，但我认为这些点是相关的：
2. 如果当前框是左浮动的，并且源文档中存在由更早的元素生成的左浮动框，那么对于每个这样的更早的框，当前框的左外边缘必须在前一个盒子的右外边缘，或者它的顶部必须低于前一个盒子的底部。类似的规则适用于右浮动框。1
7. 一个左浮动框在其左侧有另一个左浮动框，其右外边缘可能不在其包含块的右边缘的右侧。（松散地说：左浮动可能不会突出在右边缘，除非它已经尽可能地向左。）类似的规则适用于右浮动元素。
8、浮箱一定要放在尽可能高的地方。
9. 左浮箱尽量放在左边，右浮箱尽量放在右边。较高的位置优于更左/右的位置。
所以我的猜测是：-200px 的边距，正如你所说的#left元素本身宽度的负等价物，导致它一直向上和向右（而不是向左）浮动并拥抱#center本身也是浮动的元素的边缘。由于这个完整的、相等的负边距，两个元素的右边缘相互接触。因此，随着您继续增加（或减少？）负边距，您会看到#left元素继续向左移动。
请注意，应用于#container元素的填充不与边距交互；即使您删除任一侧或两侧的填充，边距也会以相同的方式交互。
1 另请注意，在规范的链接部分中关于折叠边距的部分中有一个声明，它描述了负边距的行为，但这无关紧要，因为我们在这里关注的边距是水平的并且属于浮动元素，并且所以永远不会受到崩溃的影响。
您正在<h2>为左右标题使用标签，但在中心您正在使用<h1>这就是为什么您有这个问题如果您想解决这个问题做一件事1使用所有<h2>标签作为标题，如果您想使用然后应用下面的类
h1
{
margin-top:10px;
}