CSS清除如何真正起作用？

Question

我有一个<div>我想成为一条线的人.根据W3Schools,这个规则:

div.foo {
  clear: both;
}

......应该是这样的:

"左侧或右侧都不允许浮动元素."

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

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

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

回答

感谢Michael S和John D的好解释.沃伦指出了CSS2规范,这就是我找到这个答案的地方(强调我的):

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

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

令人失望的是,我不能告诉我<div>让其他div移动,但他们是休息.:)

Answer 1

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

编辑

清除项目上方的项目不会移动,元素下面的项目可以移动.另请注意评论中的其他评论