Début d'un texte sans balisage particulier, vous pouvez d'ailleurs voir le source en dessous de l'écran. Tentons de flotter cette phrase. Pour la suite du texte, voici une première image : et en voilà une deuxième : Remarquez que ces smilies, lorsqu'ils ne flottent pas, provoquent une augmentation de la hauteur de la boîte de ligne où ils se trouvent, et que tout rentre dans l'ordre pour les lignes suivantes.

Code source simplifié :

Début [...] écran.
<span>Tentons de flotter cette phrase.</span>
<span>Pour la [...] une image : </span>
<img id="image1" />
<span> et [...] deuxième : </span>
<img id="image2" />
<span> Remarquez [...]</span>

Le maniement est simple, je crois. Je vous suggère d'y aller mollo pour commencer… À remarquer :

• l'élément que vous flottez sort de sa boîte de ligne si elle contient autre chose que des flottants et passe dans la boîte de ligne suivante ;
• quand clear : none , le texte se faufile dans l'espace resté libre ;
• clear n'a d'effet que sur les boîtes de bloc…
• flottez la première image, puis combinez float et clear sur la deuxième image et regardez-la bouger ;
• pour voir, faites float:right sur les deux images. Surpris ? Révisez la mécanique de placement…
• le code source est là pour vous rappeler ce qu'est le flux normal de la page ;
• le bouton Réinitialiser est bien pratique.