Partout Les forums Les lexiques Les tutoriaux

Apprendre les langages du web c'est si simple avec nous

Lexique CSS

Lexique CSS >> float

float: right | left;

Float vous permet de décaler des éléments html par rapport à d'autre.
Je ne pourrais exactement vous décrire ce qui ce passe, je vais donc vous faire un petit exemple simple avec trois calques sans float :
Le code html simple :

<div style="margin: 0px; padding: 0px; border: solid green 2px; width: 100%;">
<div style="margin: 0px; padding: 0px; width: 75%; background-color: blue;">cadre bleu<br />ligne 2 cadre bleu</div>
<div style="margin: 0px; padding: 0px; width: 25%; background-color: red;">cadre rouge</div>
</div>

Voyons donc maintenant ce que peut faire float :
Le code html de notre exemple avec float :

<div style="margin: 0px; padding: 0px; border: solid green 2px; width: 100%;">
<div style="margin: 0px; padding: 0px; width: 75%; background-color: blue; float: right;">cadre bleu<br />ligne 2 cadre bleu</div>
<div style="margin: 0px; padding: 0px; width: 25%; background-color: red;">cadre rouge</div>
</div>

Ce qui va donner :

Comme vous le voyez, le calque bleu s'est déplacé sur la droite et le calque rouge sur la gauche du bleu.