Proprietà CSS float
La proprietà CSS float definisce se un elemento deve flottare o meno. Vedi esempi e mettiti alla prova.
La proprietà CSS float estrae un elemento dal normale flusso del documento e lo sposta a sinistra o a destra del suo contenitore, permettendo al testo e ai contenuti inline successivi di scorrere intorno ad esso. È stata originariamente creata per far scorrere il testo attorno alle immagini (proprio come un layout di rivista), e questo rimane il suo utilizzo più chiaro ancora oggi.
Questa pagina tratta cosa fa float, i suoi valori, come interagisce con la proprietà clear, il problema del "genitore collassato" e la soluzione clearfix, e quando preferire Flexbox.
Quando un elemento è flottante:
- Viene rimosso dal flusso normale, quindi gli elementi block-level successivi si spostano verso l'alto per riempire lo spazio.
- Il contenuto inline (testo, immagini inline) scorre lungo il lato dell'elemento flottante.
- Il float si restringe per adattarsi al suo contenuto a meno che non gli si assegni un
widthesplicito.
La proprietà clear è il complemento naturale di float: indica a un elemento di posizionarsi sotto i float precedenti invece di affiancarvisi.
La proprietà float viene ignorata sugli elementi posizionati in modo assoluto (position: absolute o position: fixed), perché questi sono già rimossi dal flusso normale.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | object.style.cssFloat = "right"; |
Sintassi
Sintassi della proprietà CSS float
float: none | left | right | initial | inherit;Esempio della proprietà float:
Esempio della proprietà CSS float con valore right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Risultato
Nell'esempio seguente, l'immagine flotta a sinistra, quindi il testo del paragrafo scorre lungo il suo bordo destro.
Esempio di utilizzo della proprietà float per far flottare un'immagine:
Esempio della proprietà CSS float con valore left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc;
}
</style>
</head>
<body>
<h2>Float property example</h2>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" alt="W3dcos" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| none | Indica che l'elemento non è flottante e verrà visualizzato dove appare nel testo. Questo è il valore predefinito di questa proprietà. | Prova » |
| left | Indica che l'elemento flotta a sinistra. | Prova » |
| right | Indica che l'elemento flotta a destra. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Il problema del genitore collassato
Un elemento flottante viene estratto dal flusso normale, quindi il suo genitore non lo considera nel calcolo della propria altezza. Se un contenitore contiene solo elementi figli flottanti, collassa a zero di altezza — sfondi e bordi scompaiono, e il contenuto successivo può scorrere sotto i float.
<!DOCTYPE html>
<html>
<head>
<style>
.box { border: 2px solid #1a7e3c; }
.box img { float: left; }
</style>
</head>
<body>
<!-- The border collapses around the floated image -->
<div class="box">
<img src="logo.png" alt="logo" width="80" height="80" />
</div>
</body>
</html>La soluzione clearfix
Il modo classico e senza dipendenze per far contenere i float a un genitore è il clearfix: si aggiunge uno pseudo-elemento generato che pulisce i float. Applica la classe clearfix al genitore.
.clearfix::after {
content: "";
display: block;
clear: both;
}Puoi anche forzare il contenimento con overflow: auto (o hidden) sul genitore, oppure display: flow-root, che esiste specificamente per creare un nuovo contesto di formattazione a blocchi senza effetti collaterali. Vedi overflow per un confronto dei compromessi.
Quando usare float (e quando no)
Usa float quando vuoi davvero che il contenuto scorra attorno a un elemento — tipicamente un'immagine o una citazione evidenziata all'interno di testo continuo. È quello per cui è stato progettato.
Evita float per il layout di pagina (barre laterali, colonne, righe di navigazione). È stato usato impropriamente per questo scopo per anni, ma è fragile e richiede hack come il clearfix. Per i layout moderni, preferisci Flexbox per righe/colonne unidimensionali o CSS Grid per layout bidimensionali. Vedi anche display e position.