Html 清除的浮标向下推

我注意到了一个令人恼火的事情，在页面的两侧有相互竞争的浮动

我有两个jsfiddle来说明我的问题：

,，

在Fiddle A示例中，您可以看到左侧的图像位于绿色块的顶部和同一级别。在本例中，绿色和蓝色div位于容器内部：

<div class="floatContainer" style="float: right">
    <div>Green Div</div>
    <div style="float: right; clear: right;">
        Blue Div
    </div>
</div>

绿色分区
蓝色潜水艇

这个布局的问题是文本没有紧紧地包装到蓝色块上，而是包装在容器上

在Fiddle B示例中，我通过不浮动容器和分别浮动绿色和蓝色div来正确完成包装。为了使蓝色div低于绿色div，它当然有一个“clear:right”标签

但是，您可以看到左侧的图像现在被向下推，以便它从与蓝色div相同的y坐标开始，这不是我想要的

那么，有没有一种方法可以让文本分别环绕绿色和蓝色div，同时仍然让最左边的图像正确定位？这似乎是一个CSS错误，因为它肯定不是我所期望的行为

---

谢谢。

移动

.floatContainer

在

.content

的内部，因此它位于

东西都很长
更多的东西
Lorem ipsum dolor sit amet，献祭精英

---

移动

.floatContainer

在

.content

的内部，因此它位于

东西都很长
更多的东西
Lorem ipsum dolor sit amet，献祭精英

---

我会这样做，但我不确定该图像是否存在。这是一个博客页面，我想确保设计允许任何种类的图像。如果这是我唯一的选择，我将使用第一个例子。我会这样做，但我不确定该图像是否存在。这是一个博客页面，我想确保设计允许任何种类的图像。如果这是我唯一的选择，我就用第一个例子。

<div class="content">
    <img class="right" src="http://lorempixel.com/150/100" width="150" height="100">
    <div class="floatContainer">
        <div class="rightFloat">Stuff and things are long</div>
        <div class="rightFloat second">More Things</div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit