Nelle intenzioni di chi ha creato i CSS probabilmente non doveva essere così, ma la proprietà float, in mancanza di meccanismi dedicati esclusivamente a questo scopo, è diventata nella pratica comune la base su cui costruire layout basati sui CSS. Insieme a clear rappresenta, insomma, un elemento essenziale dei CSS.
float
Con questa proprietà è possibile rimuovere un elemento dal normale flusso del documento e spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float. La proprietà non è ereditata.
Sintassi ed esempi
La sintassi generica è questa:
selettore {float: valore;}float può assumere questo valori:
| Valore | Descrizione |
|---|---|
left |
l'elemento viene spostato sul lato sinistro del box contenitore, il contenuto scorre a destra |
right |
l'elemento viene spostato sul lato destro, il contenuto scorre a sinistra |
none |
valore iniziale e di default in mancanza di una dichiarazione esplicita; l'elemento mantiene la sua posizione normale |
Gli elementi con float, di qualsiasi natura essi siano, possono avere margini, bordi e padding come tutti gli altri elementi blocco. E soprattutto, possono avere dimensioni esplicite. Questo perché un elemento dichiarato float viene reso automaticamente con la proprietà display:block.
Un elemento float, pur essendo un elemento blocco a tutti gli effetti, se non dichiarato attraverso dimensioni esplicite, assumerà la dimensione orizzontale massima per il suo contenuto, e quella verticale necessaria.
div {
width: 200px;
float:right;
}
img {float: left;}Riassumiamo.
Gli elementi float vengono resi automaticamente block-level: questo significa che si può attribuire loro una larghezza e/o un altezza via CSS.
A differenza degli elementi block-level normali, gli elementi float oltre ad essere auto-adattanti in altezza (ossia assumere l'altezza necessaria al contenuto), lo sono anche in larghezza. Questo significa che un elemento float assumerà la larghezza massima per il suo contenuto, fino ad espandersi per tutta la larghezza del suo contenitore.
È essenziale considerare che gli elementi float vengono traslati dal flusso degli elementi di pagina verso uno dei due estremi del loro contenitore, e che elementi adiacenti nel codice "sentono" la loro presenza, regolandosi di conseguenza. Ciò nonostante, gli antenati degli elementi float, ossia i loro contenitori, li ignorano.
Una compagna quasi inseparabile della proprietà float è la proprietà clear che, se applicata ad un elemento successivo ad uno reso float, impedisce che questo subisca il float.
Controllare la larghezza di un elemento float
Come abbiamo accennato, i float sono, a differenza di elementi block-level normali, auto-adattanti in larghezza, ovvero, se non hanno una larghezza o dei margini impostati, si espanderanno in orizzontale fino alla larghezza del loro contenitore.
Gli effetti di float non controllati in larghezza sono imprevedibili. Una buona pratica è quindi costringere il float in larghezza. I modi possibili sono due:
- Attribuire una larghezza al suo contenuto o usare esclusivamente contenuto di larghezza nota.
- Dichiarare la larghezza (
width) dell'elemento float.
La prima soluzione è indicata in casi elementari, come quello in cui un div viene reso float per contenere un'immagine.
La seconda soluzione è decisamente la più pratica e usata, e si rivela essenziale nella maggior parte dei casi.
clear
La proprietà clear serve a impedire che al fianco di un elemento compaiano altri elementi con il float. Si applica solo agli elementi blocco e non è ereditata.
L'origine di tale proprietà è questa: visto che il float sposta un elemento dal flusso normale del documento, è possibile che esso venga a trovarsi in posizioni non desiderate, magari al fianco di altri elementi che vogliamo invece tenere separati. clear risolve questo problema.
Questa la sintassi di base:
selettore {clear: valore;}I valori possibili sono:
| Valore | Descrizione |
|---|---|
none |
gli elementi con float possono stare a destra e sinistra dell'elemento; |
left |
si impedisce il posizionamento a sinistra; |
right |
si impedisce il posizionamento a destra; |
both |
si impedisce il posizionamento su entrambi i lati. |
h1 {clear: both;}Approfondimenti
Proponiamo prima di chiudere la lezione alcuni link per approfondire il funzionamento di questa proprietà.