Les boîtes flottantes sont très souvent utilisées car elles permettent de réaliser par exemple :

- des habillages : des éléments sont placés tout à gauche ou tout à droite et le reste du contenu les entoure,
- des dispositions automatiques d'éléments côte à côte,
- des mises en page avec des colonnes.

### Principes

`float: right;`
`float: left;`

Une boîte flottante est une boîte qui est déplacée le plus à droite ou le plus à gauche de son conteneur. Le reste du contenu s'écoule autour de la boîte.

boîtes flottantes

Pour faire flotter une boîte, il faut utiliser la propriété float et lui assigner comme valeur `left` ou `right`.

La boîte est d'abord placée normallement dans le flux. Elle est ensuite rétirée du flux et poussée le plus à gauche possible de son conteneur (`float: left;` ) ou le plus à droite possible de son conteneur (`float: right;` ).
Le conteneu du conteneur se place autour d'elle, et éventuellement les éléments qui suivent si la hauteur de la boîte est plus grande que celle de son conteneur.

Une boîte flottante doit avoir une largeur explicite spécifiée par la propriété width sinon elle prendra la largeur nécessaire pour afficher son contenu et donc éventuellement toute la largeur de son conteneur.

Par défaut, une boîte flottante ne dépasse jamais les limites hautes, droites et gauches de son conteneur. Elle peut dépasser la limite inférieure.

Une boîte flottante est toujours considérée comme une boîte de type bloc même si son contenu est de type en ligne.

Les marges verticales d'une boîte flottante ne sont jamais combinées avec celles les boîtes supérieure ou inférieure comme dans le flux normal.

L'exemple suivant montre une image flottante à gauche avec le texte du paragraphe qui l'entoure.

Exemple : positionnement flottant
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="conteneur"> <h3>La Guerre des Etoiles du Milieu</h3> <p id="p1"><img id="i1" src="../exemples/img/yoda2.jpg">Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> </div> </body> </html>
Fichier CSS : styles.css
/* La largeur du conteneur est réduite pour avoir plusieurs lignes dans les paragraphes contenus. */ #conteneur { width: 400px; margin: 10px auto; } p { margin: 10px 0; background: azure; border:1px solid; font-size: 1.125em; } /* Image flottante à gauche */ #i1 { float: left; width: 108px; margin-right: 10px; }

Le titre est positionné en flottement à droite.

Exemple : positionnement flottant
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="conteneur"> <h3>La Guerre des Etoiles du Milieu</h3> <p id="p1"><img id="i1" src="../exemples/img/yoda2.jpg">Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> </div> </body> </html>
Fichier CSS : styles.css
/* La largeur du conteneur est réduite pour avoir plusieurs lignes dans les paragraphes contenus. */ #conteneur { width: 400px; margin: 10px auto; } p { margin: 10px 0; background: azure; border:1px solid; font-size: 1.125em; } /* Image flottante à gauche */ #i1 { float: left; width: 108px; margin-right: 10px; } /* Titre flottant à droite */ h3 { float: right; width: 140px; background: orange; margin: 0; }

### Eviter l'entourage

flottement sans entourage

Parfois on veut qu'une boîte flotte à droite ou à gauche, mais on ne veut pas que le contenu qui suit cette boîte l'entoure complétement.
Il y a 2 solutions pour arriver à ce résultat :

- utiliser la marge interne padding
- utiliser la propriété overflow

La 1ere solution consiste donc à mettre une marge interne (padding) légérement supérieure à la largeur de la boîte flottante, soit à droite (padding-right, soit à gauche padding-left suivant le côté où flotte la boîte.

Exemple : positionnement flottant - éviter l'entourage
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="conteneur"> <h3>La Guerre des Etoiles du Milieu</h3> <p id="p1"><img id="i1" src="../exemples/img/yoda2.jpg">Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> </div> </body> </html>
Fichier CSS : styles.css
/* La largeur du conteneur est réduite pour avoir plusieurs lignes dans les paragraphes contenus. */ #conteneur { width: 400px; margin: 10px auto; } p { margin: 10px 0; background: azure; border:1px solid; font-size: 1.125em; } /* Image flottante à gauche */ #i1 { float: left; width: 108px; margin-right: 10px; } /* Titre flottant à droite */ h3 { float: right; width: 140px; background: orange; margin: 0; } /* Eviter l'entourage de la boîte h3 */ #p1 { padding-right: 145px; }

La 2ème solution consiste à utiliser la propriété overflow avec une valeur autre que `visible`, par exemple `auto`. Une des caractéristiques de la propriété overflow avec une valeur autre que `visible` est de créer un nouveau contexte de formatage de bloc dont l'un des résultats est celui que nouv pouvons voir dans l'exemple.

Exemple : positionnement flottant - éviter l'entourage
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="conteneur"> <h3>La Guerre des Etoiles du Milieu</h3> <p id="p1"><img id="i1" src="../exemples/img/yoda2.jpg">Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> </div> </body> </html>
Fichier CSS : styles.css
/* La largeur du conteneur est réduite pour avoir plusieurs lignes dans les paragraphes contenus. */ #conteneur { width: 400px; margin: 10px auto; } p { margin: 10px 0; background: azure; border:1px solid; font-size: 1.125em; } /* Image flottante à gauche */ #i1 { float: left; width: 108px; margin-right: 10px; } /* Titre flottant à droite */ h3 { float: right; width: 140px; background: orange; margin: 0; } /* Eviter l'entourage de la boîte h3 */ #p1 { overflow: auto; }

### Eviter les chevauchements

Comme une boîte flottante sort du flux normal, sa hauteur n'est pas comptée dans le calcul de la hauteur du conteneur. Une boîte flottante peut donc déborder en hauteur et s'étendre sur plusieurs boîtes comme dans l'exemple suivant qui fait flotter à gauche le 2ème paragraphe.

Exemple : positionnement flottant et chevauchement
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="conteneur"> <h3>La Guerre des Etoiles du Milieu</h3> <p id="p1"><img id="i1" src="../exemples/img/yoda2.jpg">Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p id="p2">Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p id="p3">Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> <p id="p4">De plus en plus portnawak les scénarios chez Disney.</p> </div> </body> </html>
Fichier CSS : styles.css
/* La largeur du conteneur est réduite pour avoir plusieurs lignes dans les paragraphes contenus. */ #conteneur { width: 400px; margin: 10px auto; } p { margin: 10px 0; background: azure; border:1px solid; font-size: 1.125em; } /* Image flottante à gauche */ #i1 { float: left; width: 108px; margin-right: 10px; } /* 2eme paragraphe flottant à gauche */ #p2 { float: left; width: 110px; background: turquoise; margin: 0 10px; }

Pour éviter que la boîte flottante ne s'étende en hauteur sur d'autres boîtes, on utiliser la clear dans la boîte où l'on veut marquer la fin du chevauchement.

La clear peut avoir 3 valeurs :

- `left` arrête le chevauchement d'une boîte flottante sur la gauche,
- `right` arrête le chevauchement d'une boîte flottante sur la droite,
- `both` arrête le chevauchement des 2 côtés.

Exemple : positionnement flottant - arrêt du chevauchement
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <div id="conteneur"> <h3>La Guerre des Etoiles du Milieu</h3> <p id="p1"><img id="i1" src="../exemples/img/yoda2.jpg">Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p id="p2">Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p id="p3">Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> <p id="p4">De plus en plus portnawak les scénarios chez Disney.</p> </div> </body> </html>
Fichier CSS : styles.css
/* La largeur du conteneur est réduite pour avoir plusieurs lignes dans les paragraphes contenus. */ #conteneur { width: 400px; margin: 10px auto; } p { margin: 10px 0; background: azure; border:1px solid; font-size: 1.125em; } /* Image flottante à gauche */ #i1 { float: left; width: 108px; margin-right: 10px; } /* 2eme paragraphe flottant à gauche */ #p2 { float: left; width: 110px; background: turquoise; margin: 0 10px; } /* arrêt du chevauchement du dernier paragraphe */ #p4 { clear: left; }

### Boîtes flottantes adjacentes

Lorsque des boîtes flottantes sont adjacentes (côte à côte) leur bord supérieur est positionné sur la même ligne si il y a assez de place. Si il n'y a pas assez de place, la ou les dernières boîtes flottantes sont déplacées plus bas dans la première position où il y a assez de place.

Dans l'exemple suivant, les boîtes figure sont toutes avec un flottement à gauche. Suivant la largeur de la fenêtre d'affichage, les boîtes seront disposées pour respecter la règle. Vous pouvez redimensionner la fenêtre pour voir les changements dynamiques de position.

Exemple : boîtes flottantes adjacentes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Véhicules à louer</h3> <figure> <img src="../exemples/img/vulture_droid.png"> <figcaption>1 - Vulture Droid</figcaption> </figure> <figure> <img src="../exemples/img/naboo_starfighter.png"> <figcaption>2 - Naboo Starfighter</figcaption> </figure> <figure> <img src="../exemples/img/v_wing.png"> <figcaption>3 - V-wing</figcaption> </figure> <figure> <img src="../exemples/img/mandalorian_fighter.png"> <figcaption>4 - Mandalorian Fighter</figcaption> </figure> <figure> <img src="../exemples/img/x_wing.png"> <figcaption>5 - X-wing</figcaption> </figure> </body> </html>
Fichier CSS : styles.css
figure { float: left; /* met les figures côte à côte */ margin: 0.2em; /* marge tout autour */ border: 10px solid #fff; /* bord blanc de 10 pixels */ box-shadow: 1px 1px 5px 1px #999; /* ombre légére */ } img { background: #000; padding: 5px; }

### Mise en page avec colonnes

Les boîtes flottantes adjacentes peuvent être utilisées pour faire des mises en page avec des colonnes (2, 3, 4, etc).

L'exemple suivant présente une mise en page classique avec 3 colonnes.

Exemple : mise en page avec boîtes flottantes adjacentes
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <main> <header> <h3>La Guerre des Etoiles du Milieu</h3> </header> <nav> <ul> <li>Episode 1</li> <li>Episode 2</li> <li>Episode 3</li> </ul> </nav> <section> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> </section> <aside> <p>Pub</p> <p>Gagnez un ticket sur le Coudbar Express</p> <p>Pub</p> </aside> <footer>De plus en plus portnawak les scénarios chez Disney.</footer> </main> </body> </html>
Fichier CSS : styles.css
main { width: 500px; margin: 0 auto; overflow: auto; border: 1px solid } nav ul { list-style: none; padding: 10px; margin: 0 10px 0 0; background: lightgrey; float: left; width: 80px; } section { float: left; width: 300px; background: orange; margin: 0 10px 10px 0; } aside { float: left; width: 80px; background: turquoise; } footer { clear: both; text-align: center; }