Question

我有<div>我希望自己站在一条线上。根据{{3}}，这条规则：

div.foo {
  clear: both;
}

......应该是这个意思：

“左侧或右侧不允许浮动元素。”

但是，如果我向左移动两个<div>元素，并将上面的规则应用于第一个，则第二个不会让步。

另一方面，如果我将"clear: left"应用于第二个<div>，它会向下移动到下一行。这是我的正常方法，但我不明白为什么我必须这样做。

上面的W3Schools描述是不是很清楚，还是我错过了什么？ 清算规则是否只能移动应用它的元素？

答案

感谢Michael S和John D的好解释。沃伦指着W3Schools，这就是我找到这个答案的地方（强调我的）：

此属性指示元素框的哪些边可能与早期浮动框不相邻。

所以：clear仅影响应用它的元素的位置，相对于代码前面出现的元素。

令人失望的是我无法告诉我的<div>让其他div向下移动，但是他们是休息时间。：）

Answer 1

当你对一个元素应用clear时，它会移动那个元素，使它没有左边或右边的项目。它不会重新定位任何其他元素，它只是将元素移动到周围没有任何元素的位置。

修改

清除项目上方的项目不会移动，可以移动元素下方的项目。另请注意评论中的附加评论

Answer 2

你的CSS正在解析“正确”。你的第二个div仍然向左浮动，所以即使你清除了第一个div，如果第二个div的宽度方向还有空间，它将适合漂浮在它可能的最高点。

Answer 3

是，清除仅移动应用它的元素。然而，根据元件是“流动”还是不流动，结果会有所不同。我想这让你感到困惑。

如果元素在流中，则清除将其与随后的所有内容一起向下移动。将其视为移动当前笔位置（下一个元素应放置的位置）向下。这种行为很容易解决。

如果元素不在流中，如示例中的浮动，只移动元素，笔位置保持在同一位置，除非其他规则使它们移动。例如，不允许float在上一个float之上开始。

保证金崩溃也有一个混乱的问题。清除有时会以不直观的方式中断它们。

Answer 4

您对新行所需的元素应用clear。您使用的清楚取决于您不希望它接触的元素。如果你想让图像B在新的一行而不是触摸图像A（可以说是浮动：左），你可以将图像B视为{clear：left}不清楚，就像你自然想象的那样。您正在清除前一个元素的浮动。

Answer 5

我通常会为此产生以下影响：

float: left;
clear: right;

我不知道它是否仅适用于应用它的元素，尽管它是有道理的。