Exercice 13/25

  • Dans le fichier stylesheet.css, attribuez la propriété float et sa valeur right à l'élément div;
  • Remarquez comment le paragraphe p vient prendre sa place dans le flux courant;
  • Cliquez sur soumettre ma réponse pour vérifier vos résultats;

Leçon 13/25

Dans les exercices précédents, vous avez vu différentes façons d'affecter le positionnement d'un élément html en utilisant les propriétés display ou margin.

Il existe cependant d'autres propriétés CSS pour positionner des éléments de manière plus "radicale": float et position.

Le flux courant

Comprendre la notion de "flux" est primordiale pour comprendre comment float et position peuvent affecter le rendu final de vos pages web.
Le "flux" est le comportement par défaut d'affichage de vos éléments html. Il suit l'ordre de déclaration des éléments tel que vous l'avez défini dans la structure de votre document HTML.

Si les propriétés padding et margin n'affectent pas le positionnement des éléments HTML dans le flux, c'est le cas des propriétés float et position.

  • le positionnement flottant (float: left|right) : permet de faire "flotter" un élément à gauche ou à droite de son élément conteneur, le contenu qui suit vient naturellement englober l'élément flottant qui est retiré du "flux courant";

Commentaires les mieux notés

    0 Commentaires

      index.html
      stylesheet.css
      <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Le positionnement flottant (droite)</title> </head> <body> <div>Je flotte</div> <p>Je reste dans le flux courant.</p> </body> </html>
      div { height: 100px; width: 100px; border: 2px solid black; border-radius: 5px; background-color: #4D94FF; }