La propriété float

La propriété float permet de décaler un bloc à gauche ou à droite pour que le contenu voisin s'organise autour de lui. Elle a longtemps été utilisée pour construire des mises en page complètes, mais elle montre aussi rapidement ses limites.

Intérêt et introduction à la propriété float

À l'origine, la propriété float sert surtout à faire flotter un élément dans un texte. L'idée est de décaler un bloc sur un côté, puis de laisser le contenu qui suit s'enrouler autour.

						
							<img src="images/mon_image.jpg" alt="Exemple d'image flottante">
							<p>
								Un paragraphe de texte...
							</p>
						
					

						
							img{
								float: left;
								width: 200px;
							}
						
					

Il existe principalement deux valeurs à connaître :

• left,
• right.

Quand un élément flotte à gauche, le texte qui suit vient se placer à sa droite tant qu'il y a de la place disponible. C'est ce comportement d'habillage qui a rendu float très populaire pendant longtemps.

Cette propriété a donc un intérêt réel, mais il faut bien comprendre son comportement pour éviter les décalages inattendus.

Comment réagit un élément float dans un texte

Quand un élément reçoit float: left; ou float: right;, il sort en partie du flux normal. Les éléments qui suivent essaient alors de se placer autour de lui.

						
							<img src="images/mon_image.jpg" alt="Exemple d'image flottante">
							<p>
								Un long paragraphe de texte...
							</p>
						
					

						
							img{
								float: left;
								width: 200px;
								margin-right: 20px;
							}
						
					

Voici un paragraphe qui s'enroule autour d'une image flottante. Le navigateur ne place plus cette image comme un élément classique, ce qui change la manière dont le reste du contenu s'organise.

Dans cet exemple, la marge à droite crée un espace entre l'image flottante et le texte.

Comme width, height et les marges acceptent des valeurs numériques, plusieurs unités peuvent être utilisées :

• px pour des valeurs fixes,
• % pour des valeurs proportionnelles,
• em ou rem pour des tailles liées à la typographie,
• vw ou vh pour des dimensions liées à la fenêtre.

Mise en page simple de plusieurs blocs

La propriété float a aussi été utilisée pour placer plusieurs blocs sur la même ligne.

						
							<div class="colonne">Colonne 1</div>
							<div class="colonne">Colonne 2</div>
							<div class="colonne">Colonne 3</div>
							<div class="colonne">Colonne 4</div>
							<div class="colonne">Colonne 5</div>
						
					

						
							.colonne{
								float: left;
								width: 33.33%;
							}
						
					

Ici, chaque bloc flotte à gauche et occupe 33.33% de la largeur disponible.

Cette méthode fonctionne, mais elle devient rapidement plus difficile à maintenir dès que la mise en page se complexifie.

Mise en page élaborée de plusieurs blocs

On peut aller plus loin avec une colonne principale et une colonne latérale.

				
					.main{
						float: left;
						width: 70%;
					}

					.aside{
						float: right;
						width: 25%;
					}
				
			

Le résultat peut sembler pratique, mais le moindre changement de largeur, de marge ou de contenu peut casser l'équilibre de l'ensemble.

Plus une mise en page avec float devient élaborée, plus elle demande de corrections et d'ajustements.

Comment éviter un décalage de mise en page avec la propriété clear: both

L'un des problèmes classiques avec float est que les éléments suivants peuvent remonter autour des blocs flottants.

				
					<div class="bloc-gauche">Bloc flottant</div>
					<div class="bloc-droite">Bloc flottant</div>
					<p>
						Un paragraphe qui vient se placer au mauvais endroit...
					</p>
				
			

Pour forcer un retour à la ligne sous les éléments flottants, on utilise souvent clear: both;.

						
							<div class="bloc-gauche">Bloc flottant</div>
							<div class="bloc-droite">Bloc flottant</div>
							<p class="clear">
								Ce paragraphe repart sous les flottants.
							</p>
						
					

						
							.clear{
								clear: both;
							}
						
					

Cette propriété évite donc qu'un élément soit aspiré à côté d'un flottant alors qu'on souhaite qu'il reprenne sa place normale plus bas.

Limites d'une mise avec float

La propriété float peut rendre service, mais elle n'a pas été pensée au départ pour gérer des systèmes complets de mise en page moderne.

• les flottants sortent partiellement du flux normal,
• ils demandent souvent des corrections avec clear,
• les alignements complexes deviennent vite fragiles,
• la maintenance est plus difficile qu'avec des outils plus récents.

Aujourd'hui, pour construire une vraie mise en page, on préfère souvent utiliser Flexbox ou Grid.

En revanche, comprendre float reste utile, car cette propriété apparaît encore sur de nombreux anciens sites et peut encore servir dans quelques cas précis.