17

我有一个<div>我想自己上线的。根据W3Schools,这条规则:

div.foo {
  clear: both;
}

...应该是这个意思:

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

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

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

上面的 W3Schools 描述是否表述不佳,还是我遗漏了什么?清除规则是否只能移动应用它的元素?

回答

感谢 Michael S 和 John D 的良好解释。Warren 指出CSS2 spec,这就是我找到这个答案的地方(强调我的):

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

所以:clear只影响应用它的元素的位置,相对于出现在它之前的元素的代码。

令人失望的是我不能告诉我<div>让其他 div 向下移动,但它们是休息时间。:)

4

5 回答 5

13

当您将 clear 应用于元素时,它将移动该元素,使其左侧或右侧没有项目。它不会重新定位任何其他元素,它只是将元素移动到周围没有任何东西的位置。

编辑

已清除项目上方的项目不会移动,元素下方的项目可以移动。还要注意评论中的附加评论

于 2008-10-17T15:48:06.133 回答
3

您的 CSS 正在“正确”解析。你的第二个 div 仍然向左浮动,所以即使你清除了第一个,如果第二个在宽度方向上有空间,它会在它可以的最高点向左浮动。

于 2008-10-17T15:51:40.743 回答
3

是的,清除只会移动应用它的元素。但是,根据元素是“流入”还是流出,结果会有所不同。我想这让你感到困惑。

如果元素处于流动状态,则清除会将其与随后的所有内容一起向下移动。将其视为向下移动当前笔位置(应放置下一个元素的位置)。这种行为很容易理解。

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

还有一个边缘崩溃的混乱问题。清理打断了他们,有时以一种不直观的方式。

于 2008-10-17T16:20:13.027 回答
2

您将 clear 应用于您想要在新行上的元素。您使用的清除取决于您不希望它接触的元素。如果您希望图像 B 在新行上并且不触摸图像 A(可以说是浮动:左),您会将图像 B 设置为 {clear: left} 而不是您自然认为的右清晰。您正在清除前一个元素的浮动。

于 2008-10-17T15:53:33.330 回答
1

我通常会为此效果执行以下操作:

float: left;
clear: right;

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

不过,规格可在此处获得:http: //www.w3.org/TR/REC-CSS2/

于 2008-10-17T15:49:11.917 回答