Mise en page CSS – flottant et clair
Le CSS float La propriété spécifie comment un élément doit flotter.
Le CSS clear La propriété spécifie quels éléments peuvent flotter à côté de l’élément effacé et de quel côté.
La propriété flottante
Le float La propriété est utilisée pour positionner et formater le contenu, par exemple laisser une image flotter à gauche du texte dans un conteneur.
Le float propriété peut avoir l’une des valeurs suivantes :
-
left– L’élément flotte à gauche de son conteneur -
right– L’élément flotte à droite de son conteneur -
none– L’élément ne flotte pas (sera affiché juste là où il apparaît dans le texte). C’est par défaut -
inherit– L’élément hérite de la valeur flottante de son parent
Dans son utilisation la plus simple, le float La propriété peut être utilisée pour envelopper du texte autour des images.
Exemple – flottant : droite ;
L’exemple suivant spécifie qu’une image doit flotter jusqu’au droite dans un texte :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Exemple – flottant : gauche ;
L’exemple suivant spécifie qu’une image doit flotter jusqu’au gauche dans un texte :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Exemple – Pas de flottant
Dans l’exemple suivant, l’image sera affichée juste à l’endroit où elle apparaît dans le texte (float : aucun 😉 :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Exemple – Flottez l’un à côté de l’autre
Normalement, les éléments div seront affichés les uns sur les autres. Cependant, si nous utilisons float: left nous pouvons laisser les éléments flotter les uns à côté des autres :
Exemple
div {
flotteur : gauche ;
rembourrage : 15px ;
}
.div1 {
fond : rouge ;
}
.div2 {
fond : jaune ;
}
.div3 {
fond : vert ;
}
Essayez-le vous-même »
#Mise #page #CSS #flottant #clair