Proprietà CSS float
Esempio
Lascia che un'immagine fluttui a destra:
img
{
float: right;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La float
proprietà specifica se un elemento deve fluttuare a sinistra, a destra o per niente.
Nota: gli elementi posizionati in modo assoluto ignorano la float
proprietà!
Nota: gli elementi accanto a un elemento mobile scorreranno attorno ad esso. Per evitare ciò, usa la proprietà clear o l'hack clearfix (vedi esempio in fondo a questa pagina).
Valore di default: | nessuno |
---|---|
Ereditato: | no |
Animabile: | no. Leggi su animabile |
Versione: | CSS1 |
sintassi JavaScript: | oggetto .style.cssFloat="sinistra" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Sintassi CSS
float: none|left|right|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Lascia che un'immagine fluttui a sinistra:
img
{
float: left;
}
Esempio
Lascia che l'immagine venga visualizzata proprio dove si trova nel testo (float: nessuno):
img
{
float: none;
}
Esempio
Lascia che la prima lettera di un paragrafo fluttui a sinistra e definisci lo stile della lettera:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Esempio
Usa float con un elenco di collegamenti ipertestuali per creare un menu orizzontale:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Esempio
Usa float per creare una home page con intestazione, piè di pagina, contenuto a sinistra e contenuto principale:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Esempio
Non consentire elementi mobili sul lato sinistro o destro di un elemento <p> specificato:
img {
float: left;
}
p.clear {
clear: both;
}
Esempio
Se un elemento mobile è più alto dell'elemento contenitore, traboccherà fuori dal suo contenitore. È possibile risolvere questo problema con il "clearfix hack":
.clearfix::after {
content: "";
clear: both;
display: table;
}
Pagine correlate
Tutorial CSS: CSS Float
Riferimento HTML DOM: proprietà cssFloat