Float e clear

24 giugno 2013

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:

  1. Attribuire una larghezza al suo contenuto o usare esclusivamente contenuto di larghezza nota.
  2. 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.

Esempi.

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à.

Tutte le lezioni

1 ... 21 22 23 ... 33

Se vuoi aggiornamenti su Float e clear inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Float e clear

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy