image floating text and clear everything?

always the same structure.

image (with float:left) text image (with float:left) text image (with float:left) text image (with float:left) text

however if the text is not long enough the next image gets floated again and again. i always want one image with a bit of text 开发者_开发百科floated beside to it. then there should be a break and the same again. However i have no real break, due to the cms. i want to style it this way with css.

i tried to set a clear:both to every image but that doesn't work.

any idea how i can achieve that. currently every img has:

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

Try clear:left on the image:

<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>

This will prevent the images from having anything on the left-hand side, forcing them onto a new line.

clear has to appear in the first element that should not float anymore. Therefore, using both float and clear on one element eliminates itself.