Clear:

La proprietà clear gestisce lo spazio attorno ad un oggetto, impedendo che altri oggetti mossi dalla proprità float vi si posizionino.


L'attributo float può assumere i seguenti valori:

• none (Nessun impedimento)
• left (Impedisce oggetti a sinistra)
• right (Impedisce oggetti a destra)
• both (Impedisce oggetti a destra e sinistra)

none:

Il valore none non impedisce il posizionamento degli oggetti, ma permette di utilizzare la proprietà float liberamente.

left:

Il valore left impedisce che alla sinistra dell'oggetto che contiene claer si posizioni un oggetto con la proprietà float

Esempio:
Prendiamo un'immagine ed un blocco contenente del testo.
Inseriamo float:left; all'interno del blocco con il testo.
Questo è il risultato:

Adesso inseriamo clear:left; all'interno degli style dell'immagine, lasciando tutto il resto del codice uguale a prima:
Questo è il risultato:
In pratica ho impedito che alla sinistra dell'immagine si posizionasse l'oggetto contenente l'attributo float:left;.

right:

Analogo al valore left impedisce che alla destra dell'oggetto si affianchi un'altro oggetto contenente la proprietà float:right;.
Per gli esempi vi rimandiamo a quelli per il valore left.

both:

L'oggetto che contiene la proprietà clear con valore both impedisce che si possa posizionare altri oggetti su entrambi i lati.

Esempio:
Prendiamo un'immagine ed due blocchi contenenti del testo.
Inseriamo float:left; all'interno di un blocco con il testo, e float:right; all'interno dell'altro.
Questo è il risultato:

Adesso inseriamo clear:both; all'interno degli style dell'immagine, lasciando tutto il resto del codice uguale a prima:
Questo è il risultato:
In pratica abbiamo impedito che i blocchi si posizionino ai lati dell'immagine.

Come la proprietà clear dei css determina la posizione degli oggetti in una pagina web.

Responsabilità
Link amici

W3C validator

W3C validator CSS