Layout CSS : fluttuante e chiaro
La proprietà CSS floatspecifica come un elemento dovrebbe fluttuare.
La proprietà CSS clearspecifica quali elementi possono fluttuare accanto all'elemento cancellato e su quale lato.
La proprietà float
La floatproprietà viene utilizzata per posizionare e formattare il contenuto, ad esempio lasciare che un'immagine si muova a sinistra del testo in un contenitore.
La floatproprietà può avere uno dei seguenti valori:
-
left- L'elemento fluttua a sinistra del suo contenitore -
right- L'elemento fluttua a destra del suo contenitore -
none- L'elemento non è mobile (verrà visualizzato proprio dove si trova nel testo). Questo è predefinito -
inherit- L'elemento eredita il valore float del suo genitore
Nel suo utilizzo più semplice, la floatproprietà può essere utilizzata per avvolgere il testo attorno alle immagini.
Esempio - float: destra;
L'esempio seguente specifica che un'immagine deve fluttuare a destra in un testo:
Il dolore stesso è l'amore, il principale sistema di archiviazione. Phasellus imperdiet, no e si diceva qualche volta, ma la mancanza di odio Mecenate è ventaglio, vendicativo e non cucinatore, l'autore della vita di massa.
Esempio
img {
float: right;
}
Esempio - float: sinistra;
L'esempio seguente specifica che un'immagine deve fluttuare a sinistra in un testo:
Il dolore stesso è l'amore, il principale sistema di archiviazione. Phasellus imperdiet, no e si diceva qualche volta, ma la mancanza di odio Mecenate è ventaglio, vendicativo e non cucinatore, l'autore della vita di massa.
Esempio
img {
float: left;
}
Esempio - Nessun galleggiante
Nell'esempio seguente l'immagine verrà visualizzata proprio dove si trova nel testo (float: none;):
Il dolore stesso è l'amore, il principale sistema di archiviazione. Phasellus imperdiet, no e si diceva qualche volta, ma la mancanza di odio Mecenate è ventaglio, vendicativo e non cucinatore, l'autore della vita di massa.
Esempio
img {
float: none;
}
Esempio: fluttua uno accanto all'altro
Normalmente gli elementi div verranno visualizzati uno sopra l'altro. Tuttavia, se usiamo float: left, possiamo lasciare che gli elementi fluttuano uno accanto all'altro:
Esempio
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}