html - 清除漂浮物向下推

Question

我注意到页面两侧的 float float 很烦人。

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

Fiddle A , Fiddle B

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

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

这个布局的问题是文本没有紧紧包裹在蓝色 block 上，而是包裹在容器周围。

在 Fiddle B 示例中，我设法通过不 float 容器并单独 float 绿色和蓝色 div 来正确完成包装。为了让蓝色的 div 位于绿色的下方，它当然有一个“clear: right”标签。

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

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

谢谢。

Answer 1

移动.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/