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