float
» et « clear
»Le positionnement en CSS est probablement un sujet encore plus complexe que le dimensionnement.
Ceci est un paragraphe.
Ceci est un autre paragraphe.
Par défaut, les éléments de niveau bloc de largeur non spécifiée occupent toute la largeur - moins les marges intérieures - de leur élément parent. Si on spécifie une largeur, cela limite la lageur que peut occuper le contenu de l'élément, mais le reste de la largeur de l'élément parent est inaccessible à un autre contenu (voir figure 1).
La propriété
float
a été inventée pour rendre accessible cet espace non disponible autrement (voir figure 2).
Ceci est un court paragraphe.
float: left;
»float: right;
»Ceci est un est très long paragraphe : a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z.
Ceci est un autre court paragraphe.
float
D'après
La propriété
float
indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline
) entoureront alors l'élément flottant.
La réalité complète est en fait un peu plus complexe et difficile à décrire.
Tout d'abord, donnons les valeurs possibles de la propriété float
:
float | left | right | none | inherit |
La valeur none
(le défaut) indique que l'élément ne doit pas être flottant et inherit
, que la propriété doit être héritée de l'élément parent. Quant aux
valeurs left
et right
, elles indiquent que l'élément doit flotter à gauche ou à droite.
Le principe de base des éléments flottants est que si E est un élément non flottant dont le code précède le code de l'élément flottant F dans le fichier HTML, F ne peut pas apparaître plus haut que E dans la page web.
La figure 3 illustre le comportement d'un élément de niveau bloc flottant à gauche, en supposant que le code de cet élément figurerait entre les codes des deux premiers paragraphes : l'élément monte le plus haut possible tout en respectant le principe de base et, une fois là, se déplace le plus possible vers la gauche
Si la première division flottante était suivie d'une seconde, elle aussi flottant à gauche, cette dernière
Ceci est un court paragraphe.
float: left;
»Ceci est un est long paragraphe : a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z.
Ceci est un est autre long paragraphe : a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z.
Ceci est un court paragraphe.
float: left;
»float: left;
»Ceci est un est long paragraphe : a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z.
Ceci est un est autre long paragraphe : a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z.
adopterait le même comportement. S'il y a assez de place disponible, elle irait se loger juste à droite de la première (figure 4).
clear
Dans la situation de la figure 4, si on veut que la deuxième division flottante soit sous la première plutôt qu'à côté d'elle, on peut y arriver avec la propriété clear
(figure 5).
Cette propriété à pour valeurs possibles :
clear | left | right | both | none | inherit |
La directive clear: left; indique qu'un élément doit être plus bas dans la page web que tout élément flottant à gauche déclaré avant lui dans le code HTML. La directive clear: right; a un effet analogue avec les éléments flottant à droite. Quant à la directive clear: both;, elle équivaut à l'utilisation simultanée de clear: left; et clear: right;.
Ceci est un court paragraphe.
float: left;
»float: left;
»clear: left;
»Ceci est un est long paragraphe : a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z.
Ceci est un est autre long paragraphe : a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z.
clear
.Il est à noter que la propriété clear
peut être appliquée à n'importe quel élément de niveau bloc, pas seulement aux éléments flottants.
float
et overflow
Soit E un élément de niveau bloc pour qui la propriété overflow
a la valeur visible
(valeur par défaut). Pour E, c'est comme si un élément
flottant F frère ou enfant avait une largeur et une hauteur nulles. Ceci entraîne les conséquences suivantes :
Ces comportements ne sont pas nécessairement désirables, surtout dans le second cas. Comment peut-on y remédier ?
Il existe une façon particulièrement simple d'y arriver. Il se fait que si, pour la propriété overflow
de l'élément E, on prend comme valeur n'importe quoi d'autre que
visible
, E devient brusquement conscient des dimensions des éléments flottants. Donc, en utilisant la déclaration overflow: hidden; pour E,
qui a un élément flottant F comme frère, on passe par exemple de la situation de la figure 6 à celle de la figure 7. À noter qu'on choisit la valeur hidden
plutôt qu'une autre
pour éviter les barres de défilement.
De la même manière, pour éviter qu'un élément flottant F déborde de son élément parent (situation qui déroute toujours les débutants), on peut se contenter d'utiliser la déclaration overflow: hidden; pour l'élément parent (figures 8 et 9).
On trouvera d'autres exemples dans la page sur la simulation, un peu plus loin.
float: left;
»Ceci est un est très très long paragraphe : 1 2 3 4 5 6 7 8 9 0 a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z a b c d e f g h i j k l m n o p q r s t u v w x y z.
float: left;
»float: left;
»Ceci est un court paragraphe.