考虑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>我们有一些嵌入了三个浮点数的文本:
-
左边的浮动(红色圆圈)，
-
另一个左边的浮点(绿色圆圈)，这个有
clear: left的浮点确保它低于第一个浮点， -
右浮动(蓝色圆圈).
desired effect用于使右侧浮点完全独立于左侧浮点，即右侧浮点位于其插入位置的右侧(假设线条足够长，可以同时存在左侧浮点和右侧浮点，否则位于左侧浮点下方).actual effect是将右浮点数推到第一个左浮点数的下方，因为第二个左浮点数上的clear: left指令也会将右浮点数向下推.
简而言之，左侧浮点数为clear: left也会影响右侧浮点数.
Two questions:个
-
在css规范中，这个行为是在哪里指定的？(右浮点没有设置任何
clear属性，所以我不明白规范的哪个部分暗示它受到前一个左浮点的clear的影响.)我还对基本逻辑感兴趣:why我们希望右浮点受到左浮点上的clear: left个属性的影响吗？ -
更重要的是，我如何才能产生想要的效果(没有任何Java脚本)？