DEVENIR-WEBMASTER.COM Log In
 23
Faire le quizz close

Comment utiliser le positionnement flottant

Visiter ma chaine Youtube

# Utilisation classique close

Ce type de positionnement a été par le passé très utilisé notamment pour faire des structures de site web multi-colonnes. Il a été avantageusement remplacé par des structures à base de inline-block ou de flexbox.

Un assemblage utilisé pour habiller une photo avec du texte est encore très utilisé.

Ci dessous la photo est positionnée en flottant. La photo est sortie du flux. Le texte s'écoule autours de celle ci.

Habillage d'une photo en flottant

# Mise en oeuvre sur un exemple close

Il peut y avoir une imperfection au niveau de l'affichage car la hauteur du conteneur est calculée par rapport au texte qui est le seul enfant dans le flux. Ici un exemple où il y a moins de texte avec une hauteur qui peut être inférieure à celle de la photo.

Débordement sur un flottant

Pour éviter cet inconvénient vous devez ajouter une ligne de séparation hr dans le conteneur.

Code HTML flottant
La ligne hr après la photo

En utilisant la propriété clear avec la valeur both vous devez demander que la ligne ne soit pas superposable à un élément flottant, ici la photo. La ligne prendra alors place après la photo et la taille du conteneur sera dimensionnée en conséquence.

Code CSS flottant

Vous pouvez ensuite cacher la ligne de séparation avec un visibility à la valeur hidden. La ligne restera dans le flux. Attention pas de display avec none car ça retirerait la ligne du flux et ce serait le retour à la case départ.

Débordement sur un flottant

Demo ici