Table des matières:
Vidéo: Formation [openclassrooms] HTML5 et CSS3 #6 2025
Les paragraphes et autres éléments de niveau bloc ont un comportement par défaut bien défini dans CSS3. Ils prennent toute la largeur de la page, et l'élément suivant apparaît ci-dessous. Lorsque vous appliquez l'élément à un paragraphe, le comportement de ce paragraphe ne change pas beaucoup, mais le comportement des paragraphes suivants est modifié.
Commencez par regarder une page avec trois paragraphes. Le paragraphe 2 a sa propriété flottante définie à gauche.
Comme vous pouvez le voir, un formatage bizarre se passe ici. Jetez un oeil à ce qui se passe:
-
Des bordures ont été ajoutées aux paragraphes. Comme vous le verrez, la largeur d'un élément n'est pas toujours évidente en regardant son contenu. Lorsque vous vous amusez avec float, il peut être judicieux d'ajouter des bordures aux paragraphes afin que vous puissiez voir ce qui se passe. Vous pouvez toujours supprimer les bordures lorsque vous l'avez correctement.
-
Le premier paragraphe agit normalement. Le premier paragraphe a le même comportement que vous voyez dans tous les éléments de style bloc. Il prend toute la largeur de la page, et l'élément suivant sera placé en dessous.
-
Le deuxième paragraphe est plutôt normal. Le deuxième paragraphe a son attribut float défini sur left. Cela signifie que le paragraphe sera placé dans sa position normale, mais cet autre texte sera placé à la droite de cet élément.
-
Le troisième paragraphe semble maigre. Le troisième paragraphe semble entourer le second, mais le texte est poussé vers la droite. Le paramètre float dans le paragraphe précédent fait que celui-ci est placé dans n'importe quel espace restant (ce qui n'est pas beaucoup). L'espace restant est sur la droite et finalement au-dessous du deuxième paragraphe.
Le code pour produire ceci est le HTML simple avec le balisage CSS tout aussi simple:
floatDemo p {border: 2px black solide;}. float {float: left;}
Float Demo
Paragraphe 1. Ce paragraphe a le comportement normal d'un élément de niveau bloc. Il occupe toute la largeur de la page et l'élément suivant est placé en dessous.
Paragraphe 2. Ce paragraphe est flottant à gauche. Il est placé à gauche, et l'élément suivant sera placé à sa droite.
Paragraphe 3. Ce paragraphe n'a pas de flottant, de largeur ou de marge. Il prend tout l'espace qu'il peut à la droite de l'élément flottant, puis s'écoule vers la ligne suivante.
Comme vous pouvez le voir dans le code, il existe une classe simple appelée float avec la propriété float définie sur left. Les paragraphes sont définis de la manière habituelle. Même si le paragraphe 2 semble être intégré au paragraphe 3 de la capture d'écran, le code montre clairement que ce n'est pas le cas.Les deux paragraphes sont complètement séparés.
