La propriété CSS float en action

Il est souvent difficile de parvenir à positionner les élément comme on le voudrait dans une page HTML, car la propriété float, qui sert à les aligner, suit des règles complexes.

En fait lorsqu'il s'agit d'aligner des images à gauche et à droite tout en les intégrant dans le flux du texte, tout reste simple, ce qui devient plus compliqué est la création de la structure une page.

Démonstration de l'attribut Float

Cette démonstration permet de voir comment se comportent des calques avec différentes valeurs pour la propriété float, les uns par rapport aux autres dans un conteneur qui a aussi différentes valeurs pour l'attribut position. L'ordre des élements dans le code joue aussi un rôle.

Paramètres de la page: conteneur: none éléments 1: none 2: left 3: right

Choisir les valeurs dans les listes déroulantes et cliquer sur le bouton "GO".

Propriété position du conteneur :

Float :

1

Float :

2

Float :

3
Pour réinitialiser la page, presser ENTREE dans la barre d'URL

Il peut être utile de les tester sur différents navigateurs.

Références

Fonctionnement de float

La propriété prend les valeurs suivantes...

left

L'élément est présenté à gauche à l'intérieur du conteneur. Les autres éléments ou le texte, l'entourent sur la droite et au-dessous.

right

L'élément à présenté à droite dans le conteneur.

none

L'élément est présenté dans le flux après l'élément précédent.

inherit

Même valeur que le conteneur.

Il n'y a pas de valeur "center".

Choses à savoir

- La propriété display:inline ajoutée à un élément permet de faire mieux fonctionner la propriété float du même élément avec Internet Explorer 6.

- La propriété margin sépare l'élément inséré dans le texte, du corps de celui-ci. La marge compte à l'intérieur du container et non pas à l'intérieur de la page.

- On utilise clear en conjonction avec float si l'on veut repartir sur une nouvelle ligne horizontale après l'élément qui à la propriété float.

Une démonstration interactive pour définir la position de plusieurs éléments dans un conteneur en fonction de la propriété float de chacun.

© 2009-2012 Xul.fr