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

5 Commentaires

  • ryan-yahi44-23

    ryan-yahi44-23

    float right ? normalement le div va à droite ?

    le 24/02/2022 à 16h35

  • meriam

    meriam Admin

    oui, le div flotte à droite

    le 25/02/2022 à 00h05

  • stephanie.cartalier-29

    stephanie.cartalier-29

    Petit commentaire, juste au passage : par curiosité, j'ai été regarder le code source de cette page... On sera capable de créer une page identique à la fin de la formation ?

    le 16/09/2021 à 08h33

  • meriam

    meriam Admin

    Bonjour Stephanie, oui bien sûr.

    le 16/09/2021 à 08h54

  • hananiahmed778-22

    hananiahmed778-22

    j

    le 07/04/2021 à 14h25

Pour publier un commentaire, vous devez vous connecter.
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; }
http://localhost:8080