float
La propriété float indique qu'un élément doit être retiré du flux normal et doit être placé sur le côté droit ou sur le côté gauche de son conteneur. Le texte et les autres éléments en ligne (inline) entoureront alors l'élément flottant. Un élémént devient flottant dès lors que la valeur de float est différente de none. Quel que soit la valeur de display:, l'affichage de l'élément sera considéré comme étant de type block. Les valeurs que peut prendre float sont:none L'élément ne flottera pas
left L'élément flottera du côté gauche du bloc qui le contient
right L'élément flottera du côté droit du bloc qui le contient
inline-start L'élément doit flotter du côté du début du bloc qui le contient. Pour les langues qui se lisent de gauche à droite ce sera le côté gauche
inline-end L'élément doit flotter du côté de fin du bloc qui le contient. Pour les langues qui se lisent de droite à gauche ce sera le côté droit
<style>
#bloc {
width: 640px;
height: 250px;
border: 1px solid black;
background-color: lightcyan;
}
#rouge {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: red;
float: left;
margin-right: 20px;
}
#jaune {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: yellow;
float: left;
margin-right: 8px;
}
#cyan {
width: 80px;
height: 150px;
border: 1px solid black;
background-color: cyan;
float: right;
}
</style>
<div id="bloc">
<div id="rouge"></div>
<div id="jaune"></div>
<div id="cyan"></div>
Il était une fois une marchande de foie qui vendait du foie dans la bonne ville de Foix<br>
Elle se dit ma foi, c'est bien la première fois et la dernire fois que je vends du foie
dans la bonne ville de Foix.<br>
Cet exemple montre l'intérêt que l'on peut trouver à utiliser la propriété float pour le
positionnement des différents éléments dans une page.
</div>
Il était une fois une marchande de foie qui vendait du foie dans la bonne ville de Foix
Elle se dit ma foi, c'est bien la première fois et la dernire fois que je vends du foie dans la bonne ville de Foix.
Cet exemple montre l'intérêt que l'on peut trouver à utiliser la propriété float pour le positionnement des différents éléments dans une page.
Elle se dit ma foi, c'est bien la première fois et la dernire fois que je vends du foie dans la bonne ville de Foix.
Cet exemple montre l'intérêt que l'on peut trouver à utiliser la propriété float pour le positionnement des différents éléments dans une page.