Première mise en page basée sur les flottants
(Extrait du site CoursWeb)
Un élément flottant se place à la suite du flux, tout à gauche ou tout à droite de la ligne courante, selon qu’on lui ait attribué la valeur left ou right. Le flux principal poursuit sur le côté de la boîte flottante et ensuite au-dessous normalement.
Le contenu du flottant n’est pas pris en compte par un éventuel parent puisqu’il est dans un nouveau contexte de formatage et s’écoule en-dehors du flux principal.
Particularités d’un élément flottant
- Un élément flottant prend automatiquement un comportement « de type block » s’il était « de type inline » (inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block, inline-table->table) Il est donc inutile de spécifier un display:block à un span ou un lien que l’on fait flotter. De même, vouloir attribuer un display:inline-block à un élément que l’on fait flotter n’a aucun sens. Par contre, les autres type de display sont conservée, comme list-item, par exemple.
- Les marges d’un élément flottant ne fusionnent pas avec leur parent ni même entre 2 flottants positionnés l’un en-dessous de l’autre.
- Par défaut la largeur de l’élément s’adapte à son contenu, contrairement au comportement par défaut d’un type block qui occupe tout l’espace à disposition dans son conteneur.
La propriété clear
La propriété clear permet d’indiquer qu’un élément ne doit plus venir se positionner à côté des flottants et le force à venir se positionner au-dessous. On peut lui attribuer la valeur :
- both se positionne en-dessous de tous les flottants
- left en dessous des flottants à gauche mais peut rester à côté d’un flottant à droite
- right en dessous des flottants à droite mais peut rester à côté d’un flottant à gauche.
Détails de l’exercice :
Le code HTML