L'attributo Clear css. Il suo utilizzo, e le regole fondamentali. ProprietÓ float.
ALLWEB free
Web Directory Script Linguaggi
Italiano Inglese Tutte
 
 20 Oct 2014
aggiungi in preferiti  
Home    Mappa directory    Script




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.
<div style="border:1px solid black; width:300px;">
<div style="border:1px solid green; float:left; width:150px;">
Io sono il testo inserito nel blocco div.
</div>
<img src="prova1.jpg" alt="immagine di prova" style="width:74px; height:119px;">
</div>
Questo Ŕ il risultato:
Io sono il testo inserito nel blocco div.
immagine di prova

Adesso inseriamo clear:left; all'interno degli style dell'immagine, lasciando tutto il resto del codice uguale a prima:
<img src="prova1.jpg" alt="immagine di prova" style="width:74px; height:119px; claer:left;">
Questo Ŕ il risultato:
Io sono il testo inserito nel blocco div.
immagine di prova
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.
<div style="border:1px solid black; width:300px;">
<div style="border:1px solid green; float:left; width:100px;">
Io sono il primo blocco, con float:left;
</div>
<div style="border:1px solid green; float:right; width:100px;">
Io sono il secondo blocco, con float:right;
</div>
<img src="prova1.jpg" alt="immagine di prova" style="width:74px; height:119px;">
</div>
Questo Ŕ il risultato:
Io sono il primo blocco, con float:left;
Io sono il secondo blocco, con float:right;
immagine di prova

Adesso inseriamo clear:both; all'interno degli style dell'immagine, lasciando tutto il resto del codice uguale a prima:
<img src="prova1.jpg" alt="immagine di prova" style="width:74px; height:119px; claer:both;">
Questo Ŕ il risultato:
Io sono il primo blocco, con float:left;
Io sono il secondo blocco, con float:right;
immagine di prova
In pratica abbiamo impedito che i blocchi si posizionino ai lati dell'immagine.