Docs CSS exécutables : Float CSS

Q: Que fait clear ?

clear place un élément sous les flottants précédents du côté indiqué : clear: left, clear: right ou clear: both. C'est ainsi que l'on empêche un contenu de s'enrouler à côté d'un flottant.

Ce que fait float

float pousse un élément d'un côté de son conteneur et laisse le texte qui suit l'entourer :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

La margin de la boîte flottante empêche le texte de la toucher. C'est avec les marges que l'on règle cet écart ; le texte lui-même ne peut pas recevoir de marge du côté du flottant.

Les valeurs

Valeur	Résultat
`none` (par défaut)	Pas de flottement
`left`	Poussé contre le bord gauche
`right`	Poussé contre le bord droit
`inline-start`	Poussé au début de la ligne : à gauche en français, à droite en arabe ou en hébreu
`inline-end`	Poussé à la fin de la ligne

inline-start et inline-end suivent le sens d'écriture : une mise en page construite avec eux s'inverse correctement sur les pages de droite à gauche. Un élément flottant devient aussi un bloc : display: inline est transformé en block, donc width et height s'appliquent même sur un span ou un img.

Faire flotter des images dans le texte

L'usage classique : une image dans un article, avec le texte qui coule autour. Faites-en flotter une de chaque côté :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

clear : arrêter l'habillage

clear signifie « commencer sous les flottants précédents de ce côté ». Utilisez-le sur l'élément qui ne doit pas se placer à côté d'un flottant, comme le titre de la section suivante :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

Le premier titre se glisse à côté du flottant. Le second commence en dessous. clear accepte left, right, both, inline-start, inline-end et none.

Le parent qui s'effondre, et flow-root

Les flottants sont hors du flux normal, donc un conteneur dont tous les enfants flottent n'a rien dans le flux et s'effondre à une hauteur nulle. Son fond et sa bordure se réduisent à une fine ligne au-dessus des flottants :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root crée un nouveau contexte de formatage de bloc, qui englobe toujours ses flottants. L'ancien code utilise un « clearfix » pour le même résultat :

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

overflow: hidden ou auto contient aussi les flottants, avec l'effet de bord de couper le contenu ; voir overflow.

Les flottants ne servent pas à la mise en page

Avant flexbox et grid, des mises en page entières étaient construites avec des colonnes flottantes, des clearfix et des calculs de largeur partout. Cette époque est révolue : les flottants ne savent pas centrer, ne peuvent pas donner la même hauteur aux colonnes et cassent quand la taille du contenu change. Utilisez display: flex ou display: grid pour les lignes et les colonnes, et gardez float pour faire entourer un élément par du texte. Pour centrer une image plutôt que de l'habiller de texte, voir comment centrer une image.

Habiller une forme

shape-outside permet au texte de suivre une forme au lieu du rectangle du flottant. Il ne fonctionne que sur les éléments flottants :

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

Erreurs courantes

Un parent de hauteur nulle. Tous ses enfants flottent. Ajoutez display: flow-root.
Des flottants pour des colonnes ou une navigation. Utilisez flexbox ou grid.
Chercher float: center. Cela n'existe pas. Centrez avec flexbox, grid ou margin: 0 auto.
Un contenu après un flottant qui l'entoure alors qu'il ne devrait pas. Donnez-lui clear: both, ou placez le flottant et son texte dans un conteneur flow-root.
left et right physiques sur un site multilingue. Utilisez inline-start et inline-end pour que la mise en page s'inverse dans les langues de droite à gauche.

Questions fréquentes

Que fait float en CSS ?

Il sort un élément du flux normal et le pousse contre le bord gauche ou droit de son conteneur. Le texte et le contenu inline qui suivent l'entourent.

Que fait clear ?

clear place un élément sous les flottants précédents du côté indiqué : clear: left, clear: right ou clear: both. C'est ainsi que l'on empêche un contenu de s'enrouler à côté d'un flottant.

Pourquoi le parent d'un élément flottant a-t-il une hauteur nulle ?

Les flottants sont hors du flux normal, donc un parent qui n'a que des enfants flottants n'a aucun contenu dans le flux et s'effondre. Ajoutez display: flow-root au parent et il grandit pour contenir ses flottants.

Qu'est-ce qu'un clearfix ?

Une astuce pour qu'un parent contienne ses flottants, traditionnellement un pseudo-élément ::after avec clear: both. Aujourd'hui, display: flow-root sur le parent fait le même travail en une ligne.

Faut-il utiliser float pour la mise en page ?

Non. Les flottants servaient à faire des colonnes avant l'existence de flexbox et grid. Utilisez flexbox ou grid pour la mise en page, et gardez float pour son rôle d'origine : faire entourer une image ou une citation par du texte.

Concepts liés