css - 为什么左浮动的 “clear: left” 也会影响右浮动，以及如何避免它

Question

考虑this HTML example (如下所示的最小示例):

<p><svg style="float: left" width="300" height="300"><circle cx="150" cy="150" r="150" style="fill: red"
/></svg>First float here.</p>
<p><svg style="float: left; clear: left" width="300" height="300"><circle cx="150" cy="150" r="150" style="fill: green"
/></svg>Second float here.</p>
<p><svg style="float: right" width="300" height="300"><circle cx="150" cy="150" r="150" style="fill: blue"
/></svg>Third float here.</p>

我们有一些嵌入三个 float 的文本:

1. 左浮动(红色圆圈)，

2. 另一个左浮动(绿色圆圈)，这个带有 clear: left 以确保它位于第一个 float 下方，

3. 右浮动(蓝色圆圈)。

期望的效果是右浮动完全独立于左浮动，即右浮动位于其插入位置的右侧(前提是该行足够长)左浮动和右浮动同时存在，否则它会低于左浮动)。 实际效果是右浮动被推到第一个左浮动下方，因为第二个左浮动上的 clear: left 指令也将右浮动向下推。

简而言之，左浮动上的 clear: left 也会影响右浮动。

两个问题:

• CSS 规范中的哪个位置指定了此行为？ (右侧 float 没有设置任何 clear 属性，因此我不明白规范的哪一部分暗示它受到前一个左侧 float 的 clear 的影响。)我也对底层逻辑感兴趣:为什么我们希望右浮动受到左浮动的 clear: left 属性的影响？

• 更重要的是，如何才能产生所需的效果(无需任何 JavaScript)？

Answer 1

回答你的第一个问题:
documentation指定这一点:
9.5.1 5. float 框的外顶部不得高于源文档中较早元素生成的任何 block 或 float 框的外顶部。
这意味着蓝色浮标的顶部不能高于绿色浮标的顶部。

回答你的第二个问题:
有几种方法可以在不使用 js 的情况下通过更改 html 结构来实现此目的，但我认为没有一种方法正是您想要的。例如，您可以将红色和绿色浮子包裹在同一个容器内，并使其向左漂浮。蓝色浮标将位于您想要的位置。但是，在非常小的屏幕中，文本不会像此时所做的那样在红色和绿色 float 之间换行。