html - 清除浮游物向下推

我注意到页面两边的竞争性花车令人讨厌。

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

Fiddle A，
Fiddle B

在小提琴A示例中，您可以看到左侧的图像位于顶部，与绿色块处于同一级别。在这种情况下，绿色和蓝色div位于容器内：

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

我对此布局的问题是，文本没有紧紧地包裹在蓝色块上，而是围绕在容器周围。

在小提琴B示例中，我设法通过不浮动容器并分别浮动绿色和蓝色div来正确完成包装。为了使蓝色div低于绿色div，它上面当然要有一个“ clear：right”标签。

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

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

谢谢。

最佳答案

将.floatContainer移到.content内，使其在<img>之后，因此不会被清除。

<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

http://jsfiddle.net/gdFjy/3/

关于html - 清除浮游物向下推，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17307480/