为什么左边距会跳起来？

Question

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

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

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

但是在-200px（左侧元素本身的宽度），它会向上射击 [参见P3] ，左边缘靠近内容的右边缘。我原本以为它会继续走下边缘。

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

图片：

P1

---

P2

---

P3

Answer 1

请注意，#content和#left（以及#right）都会浮动。

由于浮子的性质，它们（或其内容物）可能重叠。这在this section of the spec中有详细描述，并且相当容易理解。如果将负边距应用于与另一个浮点数相邻的浮动元素，它将仅移动到其左侧（类似于具有left相对偏移量）， over 其兄弟。

在float property的部分中，您将找到“管理浮动行为的精确规则”列表。现在，我不是100％熟悉浮动模型，但这些点是我认为相关的：

  

2。如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，当前框的左outer edge必须在右侧前面框的右outer edge或其顶部必须低于前面框的底部。类似的规则适用于右浮箱。 ¹

     

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

     

8。浮动箱必须尽可能高。

     

9。左浮箱必须尽可能地放在左侧，右侧浮动箱尽可能放在右侧。较高的位置优先于左/右的位置。

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

请注意，应用于#container元素的填充不会与边距交互;即使您移除了两侧或两侧的填充物，边距也会以相同的方式相互作用。

---

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

Answer 2

您正在使用<h2>标记用于左侧和右侧标题但在中心您正在使用<h1>这就是为什么您遇到此问题的原因如果您想要解决此问题请做一件事1使用全部{{1标题用于标题，如果你想使用，那么在

上面的类下面应用

<h2>