image texte flottant et tout effacer?

Question

toujours la même structure.

image (avec float: left) texte image (avec float: left) texte image (avec float: left) texte image (avec float: left) texte

si le texte ne tarde pas assez l'image suivante flotte encore et encore. Je veux toujours une image avec un peu de texte flottant à côté de lui. alors il devrait y avoir une pause et la même chose encore. Cependant je n'ai pas vraiment de pause, à cause des cms. Je veux le style de cette façon avec css.

J'ai essayé de définir un clair: à la fois pour chaque image, mais cela ne fonctionne pas.

aucune idée comment je peux y parvenir. actuellement tous img a:

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

Answer 1

Essayez clear:left sur l'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> 

Cela permettra d'éviter les images d'avoir quoi que ce soit sur le côté gauche, en les forçant sur une nouvelle ligne.

Answer 2

clear doit apparaître dans le premier élément qui ne devrait pas flotter plus. Par conséquent, en utilisant à la fois float et clear sur un élément élimine lui-même.