我有一个<div>
,我想让它自己在线上。根据W3Schools的说法,这条规则:
div.foo {
clear: both;
}
...should的意思是:
“左边和右边都不允许有浮动元素。”
但是,如果我向左浮动两个<div>
元素,并将上述规则应用于第一个元素,则第二个元素不会改变。
另一方面,如果我对第二个<div>
应用"clear: left"
,它将向下移动到下一行。这是我的正常方法,但我不明白为什么我要这样做。
上面的W3Schools描述是不是陈述得很糟糕,或者我漏掉了什么?是一个只能移动它所应用的元素的清除规则?
回答
感谢Michael S和John D的精彩解释。沃伦指出了the CSS2 spec,这就是我找到这个答案的地方(强调我的):
此属性指示元素框的哪些边不能与早期的浮动框相邻。
因此:clear
只影响应用它的元素的位置,相对于代码中出现在它之前的元素。
令人失望的是,我不能告诉我的<div>
让其他div向下移动,但它们是突破口。:)
发布于 2008-10-17 15:48:06
当您将clear应用于一个元素时,它将移动该元素,这样它就不会在元素的左侧或右侧显示项目。它不会重新定位任何其他元素,它只是将元素移动到周围没有任何东西的位置。
编辑
清除的项目上方的项目不会移动,但元素下方的项目可以移动。还要注意注释中的其他注释
发布于 2008-10-17 15:51:41
您的css正在“正确”解析。你的第二个div仍然是向左浮动的,所以即使在你清除了第一个div之后,如果有足够的空间容纳第二个div,它也会在最上面的点适合向左浮动。
发布于 2008-10-17 16:20:13
是的,清除仅移动应用它的元素。然而,根据元素是“流中”还是流外,结果会有所不同。我想这会让你感到困惑。
如果元素在flow中,则清除会将其与随后的所有内容一起下移。可以将其看作是向下移动当前的笔位置(放置下一个元素的位置)。这种行为很容易理解。
如果元素不在流中,就像示例中的浮动一样,只有元素被移动,画笔位置保持不变,除非其他规则使它们移动。例如,浮点数不允许在前一个浮点数的上方开始。
还有一个混乱的问题,那就是利润缩水。清除会中断它们,有时是以一种不直观的方式。
https://stackoverflow.com/questions/212705
复制相似问题