La propriété "Float"

La propriété "Float"

Dans les interfaces web, nous avons souvent la nécessité de positionner plusieurs éléments côte à côte, comme un bloc de contenu principal et un menu de navigation, par exemple. Nous utiliserons la propriété float pour faire cela.

La propriété float va retirer un élément de la structure « normale » de la page, puis le déplacer à la limite de son élément parent ou d'un autre élément «flottant».

Les valeurs associées à la propriété "Float"

• none : Valeur par défaut, l'élément n'est pas un élément flottant
• left : L'élément va venir se placer à la limite gauche de son élément parent ou va être déplacé sur la gauche jusqu'à atteindre un autre élément ayant "float: left"
• right : L'élément va venir se placer à la limite droite de son élément parent ou va être déplacé sur la droite jusqu'à atteindre un autre élément ayant "float: right"

Et si on ne souhaite pas qu'un élément se place à côté d'un élément « flottant » ?

La propriété CSS "clear" va nous permettre de résoudre ce problème

• clear: none | C'est la valeur par défaut. Pas de restriction, les éléments se positionneront à côté d'éléments flottants s'il y en a.
• clear: left | Empêche un élément de se placer à côté d'éléments placés en "float: left"
• clear: right | Empêche un élément de se placer à côté d'éléments placés en "float: right"
• clear: both | Empêche un élément de se placer à côté d'éléments placés en "float: left" ou "float: right"