Mettre en page 1 (flottants)

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

Le code CSS

L’aperçu en direct