Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> div { bordure: 3px solide vert; padding: 10px; } .img1 { flottant: droite; } .img2 { float: droite; } .clearfix::after { contenu: ""; clair: les deux; afficher: table; } </style> </head> <body> <h2>Sans Clearfix</h2> <p>L'image est flottée à droite. Elle est également plus haute que l'élément qui la contient, donc elle déborde de son conteneur :</p> <div> <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> <h2 style="clear:right">Utiliser le hack Clearfix</h2> <p>Ajoutez le hack clearfix à l'élément conteneur, pour résoudre ce problème :</p> <div class="clearfix"> <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet... </div> </body> </html>