Feuilles de style - CSS : FLOAT la propriété qui sert à définir le flottement des boîtes / 38f

Cette propriété "float" définit le flottement d'une boîte à gauche, à droite ou pas du tout. On peut l'appliquer à tous les éléments générant des boîtes sauf si elles sont en position absolue. Cette propriété ne bénéficie pas de l'hérédité.

Valeurs admises

- left : l'élément génère une boîte de bloc qui flotte à gauche et le contenu s'écoule sur son flanc droit en commençant en haut (en fonction de la valeur de la propriété "clear").

- right : identique à "left" mais en inversant la gauche de la droite.

- none : la boîte ne flotte pas. (valeur par défaut)

Ainsi avec "float" on peut dans beaucoup de cas, définir dans le conteneur si l'élément suivant doit s'aligner à droite ou à gauche. (s'ils ne sont pas en position absolue faut-il rappeler.)

Si la valeur est none, l’élément se place selon l'ordre du code source généré. De plus dans les navigateurs ne reconnaissant pas les CSS, il est important de savoir que la boîte flottante sera de même présentée dans le flux normal et normalement avant la boîte qui pourrait la suivrait.

Ces valeurs font l'objet de particularités dont je vous donne copie en fin de page.

Code dans HEAD

Code 1 dans BODY

<p class="verte">Une boîte verte "float" right.</p>
<p class="jaune">Vous avez dans le flux des données reçues pour cet exemple, ... </p>

Exemple 1

Une boîte verte "float" right.

Vous avez dans le flux des données reçues pour cet exemple, une boîte verte qui est interprétée en premier et qui devrait placer son contenu (ici de couleur bleu) avant le long texte placé dans le bloc jaune qui vient après. Mais la propriété "loaft" qui est définie "right" va permettre de fixer en premier cette boîte verte tout à fait à droite, et le texte qui suit va pour sa part se dérouler autour.

Code 2 dans BODY

<p class="img"><img src="aimages/v131.gif" width="29" height="28"></p>
<p class="jaune">Une boîte qui cette fois est une image (en place de la boîte codée... </p>

Exemple 2

Une boîte qui cette fois est une image (en place de la boîte codée "vert" du précédent exemple 1), dont le "float" est ici défini "left", c'est-à-dire que la boîte flotte à gauche de notre paragraphe, et le contenu s'écoule sur son flanc droit en commençant en haut . Une boîte qui cette fois est une image (en place de la boîte codée "vert" du précédent exemple 1), dont le "float" est ici défini "left", c'est-à-dire qui flotte à gauche de notre paragraphe, et dont le contenu s'écoule sur son flanc droit en commençant en haut .

Les valeurs de FLOAT font l'objet des particularités suivantes :

1 - Le bord externe gauche d'une boîte flottant à gauche ne peut pas se trouver au-delà du bord gauche de bloc conteneur. Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées. En résumé ça ne peut pas déborder.
2 - Pour une boîte donnée flottant à gauche, celle ci suivant dans la source un élément ayant déjà généré une autre boîte flottant à gauche, le bord externe gauche de cette boîte doit venir à droite du bord externe droit de la boîte précédente, ou, sinon, son sommet doit venir en dessous du bas de la boîte précédente. Inversement et de la même façon pour des boîtes flottant à droite.
3 - Le bord externe droit d'une boîte flottant à gauche ne peut pas être placé à la droite d'un bord externe gauche d'une quelconque boîte flottant à sa droite. Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées.
4 - Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus de celui de son bloc conteneur.
5 - Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus d'une boîte de bloc (ou flottante), générée par un élément précédent dans le document source.
6 - Le sommet externe d'une boîte flottante ne peut pas se trouver au-dessus du sommet d'une boîte de ligne qui contient une boîte générée par un élément survenu plus tôt dans le document source.
7 - Une boîte flottant à gauche, ayant une autre boîte de même type à sa gauche, ne devrait pas avoir son bord externe droit au-delà du bord droit de son bloc conteneur. (Plus librement, un flottant à gauche ne devrait pas dépasser le bord droit, à moins d'être déjà au maximum à gauche). Pour des boîtes flottant à droite, les règles sont les mêmes, mais inversées.
8 - Une boîte flottante doit se trouver aussi haut que possible.
9 - Une boîte flottant à gauche doit aller au maximum vers la gauche et, au maximum vers la droite pour celle flottant à droite. Une position plus haute est préférée à celle qui est plus à gauche ou à droite.

Sommaire CSS ... @ ... applications avec "float"