Cosa fa float
float spinge un elemento su un lato del suo contenitore e lascia che il testo che segue gli scorra attorno:
Il margin sul box float impedisce al testo di toccarlo. È con i margini che controlli quello spazio; al testo stesso non si può dare un margin verso il float.
I valori
| Valore | Risultato |
|---|---|
none (predefinito) | Nessun float |
left | Spinto sul bordo sinistro |
right | Spinto sul bordo destro |
inline-start | Spinto all'inizio della riga: a sinistra in italiano, a destra in arabo o ebraico |
inline-end | Spinto alla fine della riga |
inline-start e inline-end seguono la direzione di scrittura, quindi un layout costruito con loro si specchia correttamente nelle pagine da destra a sinistra. Un elemento float diventa anche un blocco: display: inline viene trasformato in block, quindi width e height si applicano anche su uno span o un img.
Immagini float nel testo
L'uso classico: un'immagine dentro un articolo, con il testo che le scorre attorno. Mettine una per lato:
clear: smettere di scorrere attorno
clear dice "inizia sotto qualsiasi float precedente su questo lato". Usalo sull'elemento che non deve stare accanto a un float, come il titolo della sezione successiva:
Il primo titolo si infila accanto al float. Il secondo inizia sotto. clear accetta left, right, both, inline-start, inline-end e none.
Il genitore che collassa, e flow-root
I float sono fuori dal flusso normale, quindi un contenitore i cui figli sono tutti float non ha nulla nel flusso e collassa ad altezza zero. Sfondo e bordo finiscono per essere una linea sottile sopra i float:
display: flow-root crea un nuovo block formatting context, che contiene sempre i suoi float. Il codice più vecchio usa un "clearfix" per lo stesso risultato:
.clearfix::after {
content: "";
display: block;
clear: both;
}
Anche overflow: hidden o auto contengono i float, con l'effetto collaterale di ritagliare; vedi overflow.
I float non servono per il layout
Prima di flexbox e grid, interi layout di pagina si costruivano con colonne float, con clearfix e calcoli di larghezza ovunque. Quell'epoca è finita: i float non sanno centrare, non sanno rendere le colonne della stessa altezza e si rompono quando il contenuto cambia dimensione. Usa display: flex o display: grid per righe e colonne, e lascia float per far scorrere il testo attorno a qualcosa. Per centrare un'immagine invece di farle scorrere attorno il testo, vedi come centrare un'immagine.
Scorrere attorno a una forma
shape-outside permette al testo di seguire una forma invece del rettangolo del float. Funziona solo sugli elementi float:
.avatar {
float: left;
width: 120px; height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
margin-inline-end: 16px;
}
Errori comuni
- Un genitore con altezza zero. I suoi figli sono tutti float. Aggiungi
display: flow-root. - Float per colonne o navigazione. Usa flexbox o grid.
- Aspettarsi
float: center. Non esiste. Centra con flexbox, grid omargin: 0 auto. - Contenuto dopo un float che gli scorre attorno quando non dovrebbe. Dagli
clear: both, oppure metti il float e il suo testo in un contenitoreflow-root. lefterightfisici in un sito multilingue. Usainline-starteinline-endcosì il layout si specchia nelle lingue da destra a sinistra.
Domande frequenti
Cosa fa float in CSS?
Toglie un elemento dal flusso normale e lo spinge sul bordo sinistro o destro del suo contenitore. Il testo e il contenuto inline che vengono dopo gli scorrono attorno.
Cosa fa clear?
clear sposta un elemento sotto i float precedenti sul lato indicato: clear: left, clear: right o clear: both. È il modo per impedire al contenuto di scorrere accanto a un float.
Perché il genitore di un elemento float ha altezza zero?
I float sono fuori dal flusso normale, quindi un genitore con solo figli float non ha contenuto nel flusso e collassa. Aggiungi display: flow-root al genitore e crescerà fino a contenere i suoi float.
Cos'è un clearfix?
Un trucco per far contenere i float a un genitore, tradizionalmente uno pseudo-elemento ::after con clear: both. Oggi display: flow-root sul genitore fa lo stesso lavoro in una riga.
Devo usare float per il layout?
No. I float si usavano per le colonne prima che esistessero flexbox e grid. Usa flexbox o grid per il layout, e lascia a float il suo compito originale: far scorrere il testo attorno a un'immagine o a una citazione in evidenza.
