Le positionnement des éléments

1. Les propriétés « float » et « clear »

Le positionnement en CSS est probablement un sujet encore plus complexe que le dimensionnement.

Le positionnement standard des éléments de niveau bloc

Ceci est une division de largeur non spécifiée.

Ceci est un paragraphe.

Cet espace n'est pas disponible : il est bloqué par la division à gauche !
Ceci est une division de 200 pixels de large avec une marge extérieure gauche de 10 pixels.
Cet espace n'est pas disponible : il est bloqué par la division à droite !
Ceci est une autre division de 200 pixels de large avec une marge extérieure gauche de 150 pixels.

Ceci est un autre paragraphe.

Espace non dis­ponible.
Espace non dis­ponible.
Ceci est une division centrée de 200 pixels de large.
Fig. 1. Illustration du comportement par défaut des éléments de niveau bloc. L'espace inaccessible est indiqué avec du texte en gris.

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.

Division avec déclaration
« float: left; »
Division avec déclaration
« 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.

Fig. 2. Illustration du comportement typique d'éléments de niveau bloc avec des déclarations float: left; et float: right;.

La propriété float

D'après Mozilla Developer Network (MDN)

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.

Division avec la déclaration
« 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.

Fig. 3. Illustration du comportement d'un élément de niveau bloc avec la déclaration float: left;.

Ceci est un court paragraphe.

Division avec la déclaration
« float: left; »
Autre division avec la déclaration
« 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.

Fig. 4. Illustration du comportement typique d'éléments consécutifs de niveau bloc avec des déclarations float: left;.

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).

La propriété 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.

Division avec la déclaration
« float: left; »
Division avec les déclarations
« float: left; »
et
« 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.

Fig. 5. Illustration de l'utilisation de la propriété 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.

Interaction entre 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 :

  • Si F est frère de E, F peut librement empiéter sur sur l'arrière-plan de E, comme dans la figure 6.
  • Si F est enfant de E, F peut déborder des limites de E sans aucun problème, comme dans la figure 8.

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.

Division avec la déclaration
« 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.

Fig. 6. Un élément flottant F empiète sur un élément frère E.
Division avec la déclaration
« 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.

Fig. 7. On a utilisé pour le paragraphe E la déclaration
overflow: hidden;.
Division avec la déclaration
« float: left; »

Ceci est un court paragraphe.

Fig. 8. Un élément flottant F déborde de son élément parent E.
Division avec la déclaration
« float: left; »

Ceci est un court paragraphe.

Fig. 9. On a utilisé pour l'élément parent E la déclaration
overflow: hidden;.
Accueil