清除：右也清除：左？奇怪的漂浮行为
似乎 clear: right 也会导致所有连续浮点的 clear: left ！看 http://jsfiddle.net/Mx7zu/11/ 或此代码：
<html>
<head>
<style>
div { margin: 16px; width: 200px; height: 130px; border: solid red 1px; }
#right1 { float: right; }
#right2 { float: right; clear: right; }
#left1, #left2 { float: left; }
</style>
</head>
<body>
<div id="right1">Right 1</div>
<div id="right2">Right 2</div>
<div id="left1">Left 1</div>
<div id="left2">Left 2</div>
</body>
</html>
我希望 divs left1 left2 位于顶部，与 right1 处于同一水平！仅当我将 clear: right (right2) 作为最后一个的 div 时，才会发生这种情况：
<div id="right1">Right 1</div>
<div id="left1">Left 1</div>
<div id="left2">Left 2</div>
<div id="right2">Right 2</div>
您能解释一下这种奇怪的行为吗？提前致谢！在 FF 9.0.1 中测试。
It seems that clear: right causes also clear: left for all consecutive floats! See
http://jsfiddle.net/Mx7zu/11/ or this code:
<html>
<head>
<style>
div { margin: 16px; width: 200px; height: 130px; border: solid red 1px; }
#right1 { float: right; }
#right2 { float: right; clear: right; }
#left1, #left2 { float: left; }
</style>
</head>
<body>
<div id="right1">Right 1</div>
<div id="right2">Right 2</div>
<div id="left1">Left 1</div>
<div id="left2">Left 2</div>
</body>
</html>
I would expect the divs left1 and left2 to be at the top, at the same level as right1! This only happens when I place the div with clear: right (right2) as the last one:
<div id="right1">Right 1</div>
<div id="left1">Left 1</div>
<div id="left2">Left 2</div>
<div id="right2">Right 2</div>
Can you please explain this strange behaviour? Thanks in advance! Tested in FF 9.0.1.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
默认情况下，将浏览器视为从左到右、从上到下布局页面。
最初，内容的起点位于顶部左侧。
#right1收缩的float:right包裹 div 并将其移动到右侧。其左侧的空间可用于其他内容。#right2收缩的float:right会包裹 div 并尝试将其移动到右侧。但是clear:right阻止它移动到#right1div 旁边。所以要放置内容的起点会向下移动，直到#right2div能够成功放置。然后将其放置在右侧。然后放置
#left1div。float:left收缩包裹 div 并尝试将其放置在内容的起始点，该内容现在直接位于#right2的左侧。由于#right2左侧的空间足以容纳#left1，因此这就是放置#left1的位置。同样，
#right2左侧和#left1右侧的空间足够大，可以容纳#left2，这就是>#left2已放置。Think of the browser as, by default, laying out the page from left to right and top to bottom.
Initially the starting point for content is at the top, left hand side.
The
float:rightof#right1shrink wraps the div and moves it to the right side. The space to the left of it is available for other content.The
float:rightof#right2shrink wraps the div and attempts to moves it to the right side as well. But theclear:rightstops it from going next to the#right1div. So the starting point for content to be placed is moved down until the#right2div can be successfully placed. It's then placed on the right.The
#left1div is then placed. Thefloat:leftshrink wraps the div and attempts to place it at the starting point for content which is now directly to the left of#right2. Since the space to the left of#right2is large enough to contain#left1, that's where#left1is placed.Similarly, the space to the left of
#right2and to the right of#left1is large enough to accommodate#left2, that's where#left2is placed.