Mise en page CSS - flottant et clair
La propriété CSS floatspécifie comment un élément doit flotter.
La propriété CSS clearspécifie quels éléments peuvent flotter à côté de l'élément effacé et de quel côté.
La propriété flottante
La floatpropriété est utilisée pour positionner et formater le contenu, par exemple laisser une image flotter à gauche du texte dans un conteneur.
La floatproprié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, la floatpropriété peut être utilisée pour envelopper du texte autour d'images.
Exemple - flottant : droite ;
L'exemple suivant spécifie qu'une image doit flotter à droite dans un texte :
La douleur elle-même est l'amour, le principal système de stockage. Phasellus imperdiet, non et on l'a parfois dit, mais le manque de haine Mécène est fan, vengeur et non cuisinier, auteur de la vie de masse.
Exemple
img {
float: right;
}
Exemple - flottant : gauche ;
L'exemple suivant spécifie qu'une image doit flotter à gauche dans un texte :
La douleur elle-même est l'amour, le principal système de stockage. Phasellus imperdiet, non et on l'a parfois dit, mais le manque de haine Mécène est fan, vengeur et non cuisinier, auteur de la vie de masse.
Exemple
img {
float: left;
}
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 ;) :
La douleur elle-même est l'amour, le principal système de stockage. Phasellus imperdiet, non et on l'a parfois dit, mais le manque de haine Mécène est fan, vengeur et non cuisinier, auteur de la vie de masse.
Exemple
img {
float: none;
}
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: leftnous pouvons laisser les éléments flotter les uns à côté des autres :
Exemple
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}