CityDesk et Standards du Web - le wiki

Bases Des Css /
Float


En bref

Cette propriété CSS définit l'alignement d'un élément par rapport à un autre élément. Son utilisation typique est l'alignement de texte le long d'une image.

propriété : float

  • Valeur : left | right | none | inherit
  • Initiale : none
  • S'applique à : tous les éléments, sauf ceux positionnés et ceux dont le contenu est généré
  • Héritée : non
  • Pourcentage : sans objet
  • Médias : visuel
Cette propriété spécifie le flottement d'une boîte à gauche, à droite ou pas du tout. On peut l'employer pour des éléments générant des boîtes qui ne sont pas en position absolue[1]. Voici la signification des valeurs que celle-ci admet :

left : L'élément génère une boîte de bloc qui flotte à gauche. Le contenu s'écoule sur son flanc droit en commençant en haut (en fonction de la valeur de la propriété 'clear'). En ignorant la valeur de la propriété 'display', sauf si cette valeur est 'none' ;

right : Identique à 'left', mais en inversant la gauche de la droite ;

none : La boîte ne flotte pas.

Principe

Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Celle ci devient une boîte de type block dont les dimension si elles ne sont pas définies ont une valeur par défaut de "auto"

Le contenu suivant cette boîte flottante s'écoule le long de celle-ci, dans l'espace laissé libre.

L'exemple 1 nous montre quelques notions importantes : - l'élément flottant se positionne par rapport à la boite qui le contient : ici <body> - Il n'interfère pas sur ce qui le précède - C'est bien les contenus suivants qui s'écoulent le long de l'élément flottant, pas les boîtes.

Par défaut le contenu s'écoule vraiment le long de la boite flottant, pour des raisons de lisibilité il peut être nécessaire de prévoir une marge :

Il y a trois méthodes utilisable à cette fin :

  1. placer une marge sur l'élément flottant : exemple2
  2. donner au contenu suivant un padding équivalent à la dimension de l'élément flottant augmenté de la marge souhaitée : exemple3
  3. donner au contenu suivant une marge équivalente à la dimension de l'élément flottant augmenté de la marge souhaitée : exemple4
L'utilisation de l'une ou l'autre des méthodes dépendant des besoins notamment pour ce qui est de la gestion des fonds.

Lorsqu'on souhaite qu'un des contenus suivant ne soit pas concerné par l'élément flottant on utilise la propriété clear qui peut avoir pour valeur : left, right, ou both (les deux) : exemple5 Dans cet exemple, on voit que le bloc reprend une place normal après l'élément flottant, cependant, les marges du bloc s'appliquent sur le bloc qui le précède (exemple6 avec un contenu plus important) et non sur l'élément flottant.

On peut être amené à faire se succéder des élément flottants, pour la création d'une galerie de photo par exemple, cela permet d'obtenir un design qui s'adapte à la taille de la fenêtre : exemple7

Il faut cependant prendre garde à un certain nombre de détails, comme les marges, mais surtout la taille des blocs, en effet si ceux-ci sont de taille irrégulière l'effet peut être surprenant : exemple8

Il est aussi possible d'avoir besoin d'un élément à chaque extrémité de la fenêtre, on peut alors utiliser des éléments flottants à gauche et à droite : exemple9

Si ces éléments doivent encadrer du contenu il faut penser à faire attention à l'ordre dans lequel les éléments apparaissent dans le HTML/XHTML : exemple10 et exemple11

Pour éviter l'apparition de contenu entre ces éléments, le contenu doit être dans un bloc qui utilise la propriété clear: both; Un cas type de cette utilisation lors du positionnement de menu flottant : lorsque le menu est plus long que le contenu. exemple12

Exercice

Liens ressources

Discussion / Réactions :

Merci pour cette page ressources Laurent. Je me suis permis d'ajouter une partie "en bref" en haut de la page que tu corrigeras. Pas encore étudié les exemples mais cela semble de plus en plus fort : selon EricMeyer dans son CSS précis et concis[2], float serait l'une des propriétés les plus compliquées et les plus difficiles à implémenter ! Bon je compte bien faire quelques essais personnels ayant pu remettre la main via WikiPediaFr:Lewis_Carroll sur un ouvrage d'Alice au pays des merveilles semblant libre de droit, en français et avec des illustrations... A plus tard. -- ChristopheDucamp 21 Octobre, 2004 7:03 CET





[1] voir BasesDesCss/Positionnement

[2] ISBN 2-84177-156-3

 
© GPL 24 Novembre, 2004