是＆＃34;明确：对＆＃34;影响左浮动元素？

Question

想象一下，我有以下标记：

<div class="right">Box right 1</div>
<div class="right">Box right 2</div>
<div class="left">Box left</div>

<p>... long text ...</p>

和以下CSS：

.right { float:right; clear: right; }
.left { float:left; clear: left; }

div { /* some styles for the divs */ }

这将产生以下结果（见jsFiddle demo）：

这不是我预期的结果。我觉得左边的盒子也像这里一样漂浮在顶部：

问题：为什么左侧框没有浮动在顶部？ <p>内的文本从顶部开始，尽管它写在标记中的左框之后。所以我希望，div.left也是最重要的。

注意：在类clear: right的CSS中删除.right后，左框顶部浮动（请参阅jsFiddle demo）：

看来，clear:right对左浮动元素有影响......？！

注2：此标记也会按预期浮动框（jsFiddle demo）：

<div class="right">Box right 1</div>
<div class="left">Box left</div>
<div class="right">Box right 2</div>

<p>... long text ...</p>

Answer 1

正如您可能怀疑的那样，clear: right只会清除正确的浮动，而不是左浮动。左侧浮子不受间隙影响 - 至少不是直接影响。它实际上遵守spec中以下列表中的规则＃5：

  

以下是管理浮动行为的准确规则：

     

[...]

     

  
1. 浮动框的外部顶部不得高于源文档中较早的元素生成的任何块或浮动框的外部顶部。
  

这是因为间隙的设计只会影响来源之前的元素。

由于第二个右浮动正在清除第一个，它位于第一个浮动之下。并且由于左浮动位于源中的两个浮点之后，因为影响第二个浮点的间隙，它不会浮动任何高于第二个浮点数。

如果您将左侧浮动一直移动到源中的顶部：

<div class="left">Box left</div>
<div class="right">Box right 1</div>
<div class="right">Box right 2</div>

<p>... long text ...</p>

您将看到the same expected behavior。这是clear: right和clear: left / both之间差异变得显着的地方。如果箱子在两个方向上都是清澈的，那么左浮子将被两个正确的浮子清除。