CSS清除如何真正起作用？

Question

我有<div>我希望自己站在一条线上。根据 W3Schools ，此规则：

div.foo {
  clear: both;
}

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

  

<！>“左侧或右侧不允许浮动元素。<！>

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

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

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

答案

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

  

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

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

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

Answer 1

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

修改

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

Answer 2

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

Answer 3

是，清除仅移动应用它的元素。但是，结果会有所不同，具体取决于元素是否在流程<！>中;或流出。我想这让你感到困惑。

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

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

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

Answer 4

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

Answer 5

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

float: left;
clear: right;

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

此处提供的规格如下： http://www.w3.org/ TR / REC-CSS2 /