Flottant CSS

CSS Float et Annulation (Clearing)

La propriété float en CSS était traditionnellement utilisée pour créer des mises en page, mais son utilisation moderne principale est de permettre au texte d’envelopper les éléments, généralement des images. Comprendre float et comment « annuler » les flottements est toujours important.

Qu’est-ce que la propriété CSS float ?

La propriété float spécifie qu’un élément doit être retiré du flux normal du document et décalé vers la gauche ou la droite de son conteneur. D’autres contenus (comme le texte) s’écouleront alors autour de l’élément flottant.

Valeurs possibles pour float :

• left : L’élément flotte à gauche de son conteneur.
• right : L’élément flotte à droite de son conteneur.
• none : L’élément ne flotte pas (valeur par défaut).
• inherit : L’élément hérite de la valeur float de son parent.

Exemple : Faire flotter une image

Un cas d’utilisation courant pour float est d’envelopper le texte autour d’une image :

img.thumbnail {
  float: left;
  width: 150px;
  height: auto;
  margin-right: 15px; /* Space between image and text */
  margin-bottom: 5px; /* Space below image if text is short */
}

/* HTML would be like:
<p>
  <img src="image.jpg" alt="Thumbnail" class="thumbnail">
  This text will wrap around the floated image. If there is enough text,
  it will continue alongside the image and then flow underneath it once
  it passes the image's height. ...
</p>
*/

La Propriété clear

Lorsque des éléments sont flottants, les éléments suivants dans le flux normal s’enrouleront autour d’eux. Parfois, vous souhaitez qu’un élément apparaisse en dessous des éléments flottants, plutôt qu’à côté. C’est là qu’intervient la propriété clear.

La propriété clear spécifie de quels côtés d’un élément les éléments flottants ne sont pas autorisés.

• clear: left; : Le bord supérieur de l’élément est déplacé sous tout élément flottant à gauche qui le précède.
• clear: right; : Le bord supérieur de l’élément est déplacé sous tout élément flottant à droite qui le précède.
• clear: both; : Le bord supérieur de l’élément est déplacé sous les éléments flottants à gauche et à droite.
• clear: none; : Aucun effet de dégagement (par défaut).
• clear: inherit; : Hérite de la valeur clear de son parent.

Exemple : Annuler un pied de page

.content-with-floats {
  /* ... contains floated elements ... */
}

.footer {
  clear: both; /* Ensures footer appears below all floated content */
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

Contenir les flottements (le problème du “Clearfix”)

Un problème courant avec les flottements est que si un élément parent ne contient que des enfants flottants (ou si les enfants flottants sont plus grands que tout contenu non flottant à l’intérieur du parent), l’élément parent s’effondrera en hauteur, comme s’il était vide. Cela peut casser les mises en page.

Solutions Modernes pour Contenir les Flottements :

1. display: flow-root;

La manière la plus simple et la plus moderne de faire en sorte qu’un élément parent contienne ses enfants flottants est de définir display: flow-root; sur le parent. Cela crée un nouveau contexte de formatage de bloc, entraînant l’expansion du parent pour contenir les flottements.

.parent-container {
  display: flow-root;
  border: 1px solid blue; /* To visualize its bounds */
}

.parent-container .floated-child {
  float: left;
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  margin: 5px;
}

2. Le Clearfix par Pseudo-élément (Hérité mais encore courant)

Avant que display: flow-root; ne soit largement supporté, une technique courante était le pseudo-élément clearfix :

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* Apply this class to the parent container:
<div class="parent-container clearfix">
  <div class="floated-child">...</div>
</div>
*/

3. overflow: auto; ou overflow: hidden; (avec des mises en garde)

Définir overflow à une valeur autre que visible (par exemple, auto ou hidden) sur l’élément parent crée également un nouveau contexte de formatage de bloc et contiendra les flottements. Cependant, cela peut parfois entraîner des barres de défilement indésirables ou un masquage de contenu si ce n’est pas utilisé avec précaution.

Flottements pour la Mise en Page (Contexte Historique)

Historiquement, float était très utilisé pour créer des mises en page de pages à plusieurs colonnes. Bien que cela fonctionnait, cela nécessitait souvent des stratégies de dégagement complexes et pouvait être fragile.

Le CSS moderne offre de meilleurs outils pour la mise en page, tels que Flexbox et CSS Grid, qui sont généralement préférés aux flottements pour la structure globale de la page. Cependant, comprendre les flottements reste utile pour travailler avec du code hérité et pour leur objectif initial d’enveloppement de texte.

Toutes les Propriétés CSS Float et Clear

Property	Description	Values
float	Spécifie si un élément doit flotter hors du flux normal.	left | right | none | inherit
clear	Spécifie de quels côtés d’un élément les éléments flottants ne sont pas autorisés à flotter.	none | left | right | both | inherit