图像浮动文本，清除一切？

Question

总是相同的结构。

图像（带浮动：左）文本 图像（带浮动：左）文本 图像（带浮动：左）文本 图像（使用float：left）文本

然而，如果文本不够长，则下一个图像会一次又一次地浮动。 我总是希望一张图像旁边浮动一些文字。然后应该有一个休息时间再次相同。然而，由于cms，我没有真正的休息。我想用css这样设计它。

我试图明确：每个图像都有，但不起作用。

任何想法如何实现这一点。 目前每个img都有：

img {
float:left;
clear:both; /*doesn't do anything*/
}

Answer 1

在图片上试用clear:left：

<style>
    img {
        float:left;
        clear:left;
    }

    p {
        float:left;
    }
</style>

<img src="http://dummyimage.com/300" alt=""><p>text</p>
<img src="http://dummyimage.com/300" alt=""><p>text</p>
<img src="http://dummyimage.com/300" alt=""><p>text</p>
<img src="http://dummyimage.com/300" alt=""><p>text</p>

这样可以防止图像在左侧有任何东西，迫使它们进入新的一行。

Answer 2

clear必须出现在第一个不应该浮动的元素中。因此，在一个元素上同时使用float和clear会自行消除。