CSS: le proprietà float & clear

0 Flares Twitter 0 Facebook 0 LinkedIn 0 Email -- StumbleUpon 0 0 Flares ×

In parole semplici la proprietà float permette di spostare il più possibile un elemento html a destra o a sinistra, permettendo all’elemento-contenuto che lo segue di avvolgerlo. In pratica questa proprietà ha una funzione molto simile a quella che svolgeva il vecchio align.

css-floats-01Il float è molto utilizzato per le immagini, ma è ormai diventato uno degli strumenti primari dei moderni CSS, utilizzati per creare layout multicolonne, toolbar di navigazione da semplici liste, allineamenti tipo-tabelle senza l’uso di tabelle.

Vediamo un semplice esempio su una immagine:

 

http://media.mediatemple.netdna-cdn.com/wp-content/uploads/2010/06/float-css.jpg

Come vediamo abbiamo una immagine o un qualsiasi altro elemento html che viene posizionato a sinistra mediante il float, ed un testo che invece di seguirlo sotto lo avvolge. Mediante margin possimo determinare la distanza tra immagine e testo.

L’esempio sopra vale benissimo per un elemento inline come img, il quale, con il float viene automaticamente reso block. Stessa cosa con un altro elemento inline, come span, il quale ci permette di dare il float a porzioni di testo:

 

http://flylib.com/books/4/439/1/html/2/images/wdnut3_2102.jpg

Naturalmente sarà possibile dare il float ad interi paragrafi, che sono già elementi block:

E gli esempi potrebbero moltiplicarsi, specie in relazione ai layout:

float

 

float

Ora, abbiamo visto che l’elemento seguente a quello cui è stato dato il float tende ad affiancarlo ed avvolgerlo invece di stare sotto di esso. Se volessimo che l’elemento seguente a quello “flottante” continuasse a stare sotto di esso dovremmo usare la proprietà clear. Un esempio lo si può già vedere nel footer della precedente immagine, a cui è stato dato il clear in modo da stare sotto gli elementi flottanti.

Un esempio di codice:

Un problema molto comune che accade quando si lavora con i float è quello di ritrovarsi una immagine (o l’elemento comunque con il float) più grande dell’elemento che lo contiene, con il risultato di avere una immagine che trasborda i confini del suo elemento contenitore.

A tal riguardo ci vengono incontro un paio di soluzioni.

La prima è quella di applicare all’elemento contenitore qualcosa del genere:

Ciò permetterà nella maggior parte dei moderni browser di risolvere il problema, permettendo all’elemento contenitore di allungarsi ed adattarsi all’elemento flottante contenuto in esso.

Un’altra soluzione, compatibile anche con i browser più datati e il c.d. metodo clearfix: si tratta di applicare una classe (di solito la si chiama appunto .clearfix) all’elemento contenitore.

 

http://noscope.com/wp-content/uploads/clearfix.png

Magari si può ricorrere alla classe clearfix scritta da Nicolas Gallagher: micro-clearfix hack (che applicherà il clear agli elementi che contengono elementi floattati):


Riguardo il metodo clerafix di notevole interesse è questo articolo di CSS-Tricks: Force Element To Self-Clear its Children, nonchè questa discussione su stackoverflow.com.

0 Flares Twitter 0 Facebook 0 LinkedIn 0 Email -- StumbleUpon 0 0 Flares ×
 

Lago