Css float 为什么左边距会跳起来？

我正在跟进，但我很难理解第3步中到底发生了什么

为了解决这个问题，我禁用了“left”和“right”div的边距/偏移。这将使您看到顶部的内容，然后是并排放置在它下面的另外两个元素，正如我所期望的那样[参见P1]

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

但在-200px（左元素本身的宽度）时，它会上升到顶部[参见P3]，内容的左边缘与右边缘相对。我本以为它会一直走到边缘

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

图像：

P1

---

P2

---

P3

您正在使用

标记来表示左右标题，但在中间您正在使用

，这就是为什么您会遇到此问题如果您想解决此问题，请做一件事1使用所有

标记来表示标题，如果您想使用，请在下面的课堂上应用

h1
{
margin-top:10px;
}

请记住，

#内容

和

#左侧

（以及

#右侧

）都是浮动的

由于浮动的性质，它们（或其内容）可能重叠。这在中有很好的描述，并且相当容易理解。如果将负边距应用于与另一个浮点相邻的浮点元素，它将在其同级上向左移动（类似于具有

左

相对偏移）

在上一节中，您将看到“控制浮动行为的精确规则”列表。现在，我对浮动模型不是100%熟悉，但我认为以下几点是相关的：

二,。如果当前框是左浮动的，并且源文档中之前的元素生成了任何左浮动框，那么对于每个这样的早期框，当前框的左侧必须位于早期框右侧的右侧，或者其顶部必须低于早期框的底部。类似规则适用于右浮动框。1

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

八,。浮箱必须放置在尽可能高的位置

九,。左浮动框必须尽可能向左放置，右浮动框必须尽可能向右放置。更高的位置优先于更靠近左/右的位置

所以我的猜测是：一个-200px的边距，正如你所说的，它是

#left

元素本身宽度的负等价物，导致它一直向上和向右（而不是向左）浮动，并拥抱

#center

元素的边缘，而该元素本身也是浮动的。两个元素的右边缘相互接触，因为这是一个完整的、相等的负边界。因此，当您继续增加（或减少？）负边距时，您将看到

#left

元素继续向左移动

请注意，应用于

#container

元素的填充不与边距交互；即使删除任意一侧或两侧的填充，边距也将以相同的方式交互

---

---

1还要注意的是，在规范的链接部分的上一节中有一条语句，描述了负边距的行为，但这与此无关，因为我们在这里关注的边距是水平的，属于浮动元素，所以你永远不会受到崩溃的影响。

你使用的css代码是什么？他在哪里说这是个问题？这是什么意思？问题开始时理解困难当然根据规则2，P3不应该是可能的？当前（紫色）框的左边缘位于文档中较早的（灰色）框的右边缘的左侧，其顶部不低于灰色框的底部。负边距实际上将其左边缘推向右侧，因此应用刚好足够的当前框宽度可以使其与较早框的右边缘紧密“贴合”。既然它可以这样“向上”浮动，那么我认为它是这样做的，因为规则9说，更高的边距优先于离左边更远的边距。负的左边距不是把它的左边距推向左边吗？前面的框是内容，它的宽度为100%，所以它不能紧贴在右边边缘，因为没有空间？我理解错了什么？正边距会将长方体的外缘向左延伸。外边缘指的是边距边界，而不是内容或边界边界。如果在其包含块的左边缘有一个div，并增加该div的正边距，则不会向左移动。div的外边缘保留在包含块的左边缘上，内容/边框边界向右移动。我想象边距的方式就像潜水者是一个在船上的人，用他的桨把他推离海岸，他推的量就是边距的长度。同样地，在负边距的情况下，他只是向相反的方向推进（这会很困难，因为他会将自己推入陆地，但这不是重点）。