Question

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处于同一水平！只有当我将div clear: right（right2）作为最后一个放置时才会发生这种情况：

<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中测试。

Answer 1

默认情况下，将浏览器视为从左到右，从上到下布置页面。

最初内容的起点位于左上角。

float:right #right1缩小包裹div并将其移到右侧。其左侧的空间可用于其他内容。

float:right #right2缩小包裹div并尝试将其移动到右侧。但clear:right阻止它转到#right1 div旁边。因此，放置内容的起点向下移动，直到#right2 div成功放置。它然后放在右边。

然后放置#left1 div。 float:left缩小包裹div并尝试将其放置在内容的起始点，该内容现在直接位于#right2的左侧。由于#right2左侧的空格足够大，可以包含#left1，因此#left1位于此处。

同样，#right2左侧和#left1右侧的空间足以容纳#left2，即放置#left2的位置。

明确：对也明确：左？奇怪的浮动行为

1 个答案: