ISSN 1722-375X
[Vai al menu di navigazione principale]


Home > Tips > Recupero float > Ripristino in seguito all'utilizzo della proprietà float

[Vai al piè di pagina]

Ripristino dell'allineamento in seguito all'utilizzo della proprietà float

La proprietà float, molto utile per la creazione di layout elaborati, può creare alcuni "effetti indesiderati". In questo articolo vedremo come la proprietà 'clear' possa essere utilizzata per evitare alcuni problemi.

La proprietà float permette di allineare contenuti lateralmente a un box. Nell'esempio, la proprietà 'float:left' è associata al box col bordo blu).

Come si vede nella parte superiore dell'esempio, il box rosso, il box verde e il testo avvolgono sulla destra il box blu.

Spesso, non si vuole che tutto il resto della pagina si avvolga attorno al box caratterizzato dalla proprietà 'float' e si vorrebbe interrompere l'effetto del floating. Per fare ciò è possibile utilizzare la proprietà 'clear'. Questa può assumere i valori none | left | right | both. Questa proprietà specifica se è consentito il floating dell'elemento a cui è applicata nel lato specificato.

Qualora si volesse che il testo al di fuori dei box non venisse allineato alla destra del box blu, si può racchiuderlo con un tag <div> a cui associare la proprietà 'clear:left' come riportato nella parte inferiore dell'esempio.

In alternativa si può associare la proprietà clear a un <div> vuoto come riportato nel codice seguente e porre tale codice (X)HTML subito prima degli elementi che non devono essere affiancati al box caratterizzato dalla proprietà float.

<div style="clear:left;"></div>

In alcuni casi, la soluzione presentata nel codice sopra riportato è più pratica.

Commenti sull'articolo

G.T. -- ultima revisione: 11.09.2002

File correlati

Articoli correlati:


Strumenti



l'indirizzo di questa pagina è: http://www.constile.org/tips/recupero_float/index.php