Accueil    CSS    Propriété Float
 



style css float  Style CSS float

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété float (comprendre flottement) détermine la façon dont l'élément sur lequel elle s'applique, sera affiché par rapport à son conteneur qui fixe les limites avec ses bordures.
L'élément s'adaptera donc au conteneur et sera positionné soit complètement sur la gauche (float:left) ou sur la droite (float:right) du conteneur sans tenir compte des autres éléments qui seront à leurs tours réagencés.

Il faut toutefois tenir compte de deux éléments important lorsque les styles float et clear sont utilisés :
- la notion d'affichage inline ou block des éléments html
- la notion d'ordre de traitement linéaire des balises dans le flux

Appliquer la propriété clear sur un élément de type inline (comme <span> ou <label>) n'aura pas le même effet que sur un élément de type block (comme <p> ou <div>). L'élément inline s'affichera en effet à la suite de l'élément flottant malgré l'instruction clear alors que l'élément de type block s'affichera lui en dessous.

D'autre part l'ordre de déclaration des balises impliquées dans une disposition employant les styles float et clear impacte directement le rendu, le parseur traitant les éléments dans l'ordre dans lequel ils arrivent.



Propriétés pour le style float :




Propriété Définition Valeurs CSS
Float Défini le positionnement d'un élément dans son conteneur left
right
none
inherit
CSS 1


Exemple d'utilisation du style css float :



Dans un élément conteneur div, nous affichons un texte centré ainsi qu'une image sur chaque côté en utilisant la propriété [float:right;] pour l'image positionnée à droite et [float:left;] pour l'image positionnée à gauche :



<div style="padding:10px; border:solid 1px gray; width:250px; text-align:center;">
   <img style="float:right;" src="../images/ico_carre.gif" />
   <img style="float:left;" src="../images/ico_carre.gif" />
   <span>Texte centré encadré par des images</span>
</div>


exemple float exemple float Texte centré encadré par des images