Un element peut avoir une position flottante a droite ou a gauche avec la propriete float. C'est-a-dire que la
boite et son contenu peut flotter soit a droite, soit a gauche dans un document (ou dans la boite conteneur),
cf. la description du modele des boites dans la lecon 9. La figure suivante illustre le principe :
Si par exemple nous voulions qu'un texte s'enroule autour d'une image, le resultant serait le suivant :
Voici le code HTML de l'exemple precedent :
<div id="picture">
<img src="http://www.info-concept.net/image/bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Pour que l'image flotte a gauche et que le texte l'entoure, il suffit de definir la largeur de la boite entourant l'image puis
de donner a la propriete float la valeur "left" :
#picture {
float:left;
width: 100px;
}
Les flottants peuvent aussi servir pour le colonnage d'un document. Pour creer les colonnes, il suffit de les structurer dans
le code HTML avec des elements <div> de la facons suivante :
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
Une fois fixee la largeur des colonnes (par exemple a 33%), on fait simplement flotter chaque colonne a gauche en definissant
la propriete float :
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
La propriete float admet les valeurs "left", "right" ou "none".
la propriete clear sert a controler le comportement des elements qui viennent apres les elements flottants dans le document.
Par defaut, les elements a suivre remontent pour combler l'espace dispobible libere lorsqu'une boite flotte d'un cote. Examinez l'exemple precedent dans lequel le texte se place automatiquement sous la photo de Bill Gates.
La propriete clear admet les valeurs "left", "right", "both"
ou "none". Le principe est tel que, par exemple, si la valeur de clear d'une boite est fixee a "both",
la bordure superieure de la marge de cette boite se trouvera toujours sous la bordure de la marge inferieure des boites flottantes
eventuelles venant du dessus.
<div id="picture">
<img src="http://www.info-concept.net/image/bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
Pour empecher que le texte ne flotte a cote de l'image, nous pouvons ajouter le code CSS suivant :
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Les flottants sont tres utiles dans beaucoup de situations, et on les utilisera souvent en meme temps qu'un positionnement. Dans la lecon suivante, nous etudierons comment placer une boite en position relative ou bien absolue.