Float Property

§1 Vediamo come si comportano i diversi elementi quando ad essi viene applicata la property float.
Float rende il box, contenente l'elemento, "galleggiante" sopra il suo contenitore.
Il box "galleggiante" si porta in primo piano, lasciando libera l'area precedentemente occupata.
Lo spazio lasciato libero viene occupato dai box degli elementi che lo seguono, i quali salgono verso l'alto sino ad occupare la posizione che avrebbero avuto se il box "galleggiante" non ci fosse mai stato.
Inoltre il loro contenuto "scorre" a destra o a sinistra in modo da non essere coperto.

§2 In aggiunta a questo, l'oggetto "galleggiante", si sposta a sinistra o a destra a seconda del valore left o right assegnato a float restando comunque sopra il suo contenitore.

§3 I due riquadri seguenti, illustrano il funzionamento di float nel caso di applicazione ad una immagine.
Per meglio evidenziarne gli effetti ho assegnato colori di background diversi agli elementi coinvolti.

Container con immagine disposta normalmente.

tools
Il contenuto della mia cassetta degli attrezzi

Un piccolo kit di utensili che porto sempre con me per risolvere piccoli problemi di manutenzione.
Si tratta di una dotazione di primo intervento che può rivelarsi utile in diverse circostanze. E' composto da:

Container con immagine float:left.

tools
Il contenuto della mia cassetta degli attrezzi

Un piccolo kit di utensili che porto sempre con me per risolvere piccoli problemi di manutenzione.
Si tratta di una dotazione di primo intervento che può rivelarsi utile in diverse circostanze. E' composto da:

§4 Vi faccio notare come anche i due precedenti riquadri colorati siano "galleggianti" sopra al loro contenitore, il body, e come il contenuto di questo paragrafo sia scorso a destra per non essere coperto.

§5 Segue un altro riquadro flottante, che differisce dal precedente solo per il valore della property float applicata all'immagine: right invece di left.

Container con immagine float:right.

tools
Il contenuto della mia cassetta degli attrezzi

Un piccolo kit di utensili che porto sempre con me per risolvere piccoli problemi di manutenzione.
Si tratta di una dotazione di primo intervento che può rivelarsi utile in diverse circostanze. E' composto da:

Clear property

§6 Questo paragrafo e l'intestazione che lo precede, sono influenzati dall'elemento flottante alla loro destra.
Per interrompere questo comportamento è disponibile la property clear, (clear:left, clear:right, clear:both), che ripristina il posizionamento normale dell'elemento a cui è applicata e agli elementi a questo successivi.
Il funzionamento di clear è illustrato dal riquadro seguente.

Container con immagine float:right.

Come forzare la ripresa normale del flusso degli elementi che seguono un oggetto "galleggiante".

tools
Il contenuto della mia cassetta degli attrezzi

Un piccolo kit di utensili che porto sempre con me per risolvere piccoli problemi di manutenzione.
Si tratta di una dotazione di primo intervento che può rivelarsi utile in diverse circostanze. E' composto da:

Per questo paragrafo ho impostato clear:right che provoca il posizionamento del paragrafo stesso e di quelli che gli succederanno secondo il flusso normale.

§7 Tutti i riquadri sino ad ora mostrati sono stati dichiarati float:left, anche quelli che occupano la parte destra dello schermo.
Questo perchè la regola float:left, applicata ad un elemento, fa si che il box dell'elemento si sposti, nel suo contenitore, il più possibile a sinistra rispettando gli elementi già posizionati sul suo layer.
Cercherò di illustrare questo concetto con più dettaglio nei prossimi riquadri.

§8 Per ora concludo la trattazione di clear facendo notare come l'operazione di clear si sia propagata anche al di fuori del riquadro contenente il paragrafo su cui è stata dichiarata.

Altri esempi

§9 Gli esempi sino ad ora mostrati mostravano contenitori in cui c'era un solo elemento "galleggiante" seguito da elementi "normali" il cui contenuto di riposiziona per occupare lo spazio lasciato libero dall'elemento flottante.
Ma cosa succede se dichiaro float più di un elemento dello stesso contenitore? Lo vedremo nei seguenti riquadri che ci faranno meglio capire il significato di float:..

Container con elementi disposti secondo il flusso normale.

tools

tools

Il contenuto della mia cassetta degli attrezzi.

ciliege

ciliege

Alcune ciliege mature del nostro albero.

goletta

goletta

Una foto scattata anni fa in Calabria.

Container con alcuni elementi flottanti.

tools

tools

Il contenuto della mia cassetta degli attrezzi.

ciliege

ciliege

Alcune ciliege mature del nostro albero.

goletta

goletta

Una foto scattata anni fa in Calabria.

§10 Tutti gli elementi del riquadro di sinistra sono posizionati secondo il flusso normale.

§11 Nel contenitore di destra tutte le immagini sono state dichiarate float:left.
L'effetto di questa impostazione è tuttaltro che soddisfacente. Per migliorare le cose inseriamo clear:left fra le proprietà delle intestazioni "ciliege" e "goletta".
Il risultato di tale operazione è il seguente:

Container con alcuni elementi flottanti.

tools

tools

Il contenuto della mia cassetta degli attrezzi.

ciliege

ciliege

Alcune ciliege mature del nostro albero.

goletta

goletta

Una foto scattata anni fa in Calabria.

§12 Un'altra soluzione che da risultati quasi identici è quella di inserire le immagini float:left all'interno dei paragrafi

Container con alcuni elementi flottanti.

tools

toolsIl contenuto della mia cassetta degli attrezzi.

ciliege

ciliegeAlcune ciliege mature del nostro albero.

goletta

golettaUna foto scattata anni fa in Calabria.

§13 L'unica differenza fra le due ultime disposizioni è che nell'ultima le foto hanno rispettato il padding dei paragrafi.

§14 Per far si che l'area azzurra si estesse sotto l'ultima foto ho inserito, dopo il paragrafo con la didascalia, un paragrafo vuoto con la proprietà clear:left.

§15 Nel prossimo esempio richiameremo l'attenzione su un fenomeno collegato al "galleggiamento" che sino ad ora non abbiamo trattato
Vedremo cosa succede ad un elemento di tipo block, ol, nello specifico quando viene reso "galleggiante".

Container con elementi di tipo block

Elenco delle proprietà css che hanno a che fare con il posizionamento visuale degli oggetti

La property position ha per default il valore static. In questa pagina tutti gli oggetti hanno posizionamento statico
Le properties left, top, right, bottom, non hanno effetto sugli oggetti posizionati staticamente, pertanto non sono mai state utilizzate in questa pagina.

Container con elementi di tipo block

Elenco delle proprietà css che hanno a che fare con il posizionamento visuale degli oggetti

La property position ha per default il valore static. In questa pagina tutti gli oggetti hanno posizionamento statico
Le properties left, top, right, bottom, non hanno effetto sugli oggetti posizionati staticamente, pertanto non sono mai state utilizzate in questa pagina.

§16 Possimo notare che il box contenente ol oltre a sollevarsi dal suo contenitore, sembra abbassarsi.
Questo è dovuto al fatto che il suo margine superiore non è più adiacente ad alcun altro margine e pertanto non collassa.

§17 Notiamo anche che l'elemento ol di default non ha margine destro e quindi non c'è alcuno spazio prima del testo adiacente.

§18 Per eliminare gli inconvenienti sopra osservati si possono modificare i margini dei box flottanti in questi termini: azzerare margin-top, assegnare un valore maggiore di 0 a margin-right per i box float:left, e analogamente modificare margin-left per box float:right.

Container con elementi di tipo block

Elenco delle proprietà css che hanno a che fare con il posizionamento visuale degli oggetti

La property position ha per default il valore static. In questa pagina tutti gli oggetti hanno posizionamento statico
Le properties left, top, right, bottom, non hanno effetto sugli oggetti posizionati staticamente, pertanto non sono mai state utilizzate in questa pagina.

§19 Per il momento credo di aver analizzato sufficientemente la proprietà float.

§20 Concludo mostrando le regole di stile scritte per ottenere/annullare gli effetti di galleggiamento prensenti in questa pagina:


            .floatLeft{
               float:left;  
            }
            .floatRight{
               float:right;  
            }
            .clearLeft{
               clear:left;
            }
            .clearRight{
               clear:right;
            }
            .floatLeftMigliorato{
               float:left; 
               margin-top:0;
               margin-right:1em;
            }        
         

§21 In pratica, per rendere un elemento flottante, non ho fatto altro che dichiarare l'elemento appartente ad una delle classi floatLeft o floatRight, ed analogamente, per ricondurre un elemento al suo comportamento normale è bastato dichiararlo appartenente alla classe clearLeft o clearRight. classe