CSS浮动/清除拼图（竞争浮动）

我拍摄了一张图片，将其切成三段，然后将其向右浮动，让文本在其周围流动。HTML的外观如下所示：

<img src="" style="float: right;">
<img src="" style="float: right; clear: right;">
<img src="" style="float: right; clear: right;">

它工作得很好，直到我添加了一个侧边栏，并将其浮动到我的图像的右上方，就像这样

<div class="Sidebar" style="float: right;">Text, Menus, etc.</div>
<img src="" style="float: right;">
<img src="" style="float: right; clear: right;">
<img src="" style="float: right; clear: right;">

文本、菜单等。

现在，第一个图像（没有清晰的样式）仍然保持在它应该在的位置，但是其他两个图像在侧边栏下面消失了

---

有人知道解决这个问题的方法吗？

您应该在这3幅图像周围添加一个容器，并将其向右浮动

请参见此

代码：

<div class="Sidebar" style="float: right;">Text, Menus, etc.</div>
<div style="float: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right; clear: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right; clear: right;">
</div>

---

你应该在3个图像周围添加一个容器，并将其向右浮动

请参见此

代码：

<div class="Sidebar" style="float: right;">Text, Menus, etc.</div>
<div style="float: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right; clear: right;">
    <img src="http://lorempixel.com/output/fashion-q-g-100-80-7.jpg" style="float: right; clear: right;">
</div>

---

将其添加到div之后，以完全清除浮动

<br clear="all">

将此项添加到div之后，以完全清除浮动

<br clear="all">

您是否尝试过仅在侧栏上使用

清除：右

，而不在任何图像上使用？@John Rutherford:是；这没有任何效果。你想让文本只围绕图像流动，还是围绕图像和侧边栏流动？@Alochi-这是个好问题！边栏实际上有点问题；我仍在努力弄清楚如何实现它。目前，它只是向右浮动，文本确实在底部围绕它流动。所以我想我希望文本在两者之间浮动。但是，如果您知道任何其他解决方案（例如，仅图像周围的文本流），我很想了解它们。您是否尝试过仅在侧边栏上使用

clear:right

，而不在任何图像上使用？@John Rutherford:是；这没有任何效果。你想让文本只围绕图像流动，还是围绕图像和侧边栏流动？@Alochi-这是个好问题！边栏实际上有点问题；我仍在努力弄清楚如何实现它。目前，它只是向右浮动，文本确实在底部围绕它流动。所以我想我希望文本在两者之间浮动。但是，如果您知道任何替代解决方案（例如，仅图像周围的文本流），我很想听听。@web tiki-对我来说，这是一个部分修复，因为图像显示正确，但我放置图像切片的div阻止文本环绕图像。@DavidBlomstrom这就是您要寻找的吗@DavidBlomstrom第二次编辑有错误，请使用他的第一个html标记并在两个浮动div之后添加文本div。您的文本将围绕这两个元素浮动。@vortex您看到了什么错误？@web tiki-我知道了，您将浮动的图像切片放置在侧边栏上方。这将需要一些定制，但这些是特殊的图像，所以也许这就是方法。谢谢。@web tiki-对我来说，这是一个部分修复，因为图像显示正确，但我放置图像切片的div阻止文本环绕图像。@DavidBlomstrom这就是你要找的吗@DavidBlomstrom第二次编辑有错误，请使用他的第一个html标记并在两个浮动div之后添加文本div。您的文本将围绕这两个元素浮动。@vortex您看到了什么错误？@web tiki-我知道了，您将浮动的图像切片放置在侧边栏上方。这将需要一些定制，但这些是特殊的图像，所以也许这就是方法。谢谢