Proprietà css float e clear:spostamenti d’elementi verso la destra o sinistra e rimossione d’elementi floatati di lato a un altro elemento di blocco

La proprietà css float con i suoi valori left e right permette di spostare elementi verso la sinistra o la destra utile per esempio nella creazione di una struttura d’una pagina, di menu orizzontale, aggiungere testo attorno immagine… Mentre la proprietà css clear con i suoi valori left, right, both permette di evitare che un elemento floatato si sposta accanto un altro elemento di blocco.

Di seguito, le caratteristiche di entrambi proprietà float e clear con esempi concreti del loro uso.

Proprietà css float

Le caratteristiche d’un elemento floatato

1. L’elemento è rimosso del flusso naturale e spostato il più possibile verso la sinistra con float:left; o la destra con float:right;

NB: il valore di default è float:none;

2. L’elemento floatato si sposterà fino il bordo del suo contenitore o quello d’un altro elemento floatato

3. Se l’elemento floatato non ha abbastanza spazio orizzontalmente, si sposterà verso il basso fino trovare il spazio disponibile

4. Un elemento floatato diventa un elemento di blocco e richiede una larghezza specifica (width)

NB: il ‘width’ non è necessario se il float è applicato direttamente ad un immagina (img) visto che ha una larghezza implicita

5. Il contenuto degli elementi dopo il ‘float’ si sposteranno attorno per riempire lo spazio disponibile

NB: i bordi e sfondo rimangono comunque li stessi

6. Gli elementi di blocco prima del ‘float’ non saranno disturbati

Altri articoli consigliati da leggere:

• Il box model con esempi concreti del uso della proprietà css float
• La differenza tra elementi di blocco e inline

Proprietà css clear

L’uso del clear

1. Evita che vengono posizionato di fianco a l’elemento ‘cleared’ altri elementi floatati

2. Si può scegliere di ‘chiarire’ il lato sinistro con clear:left;, il lato destro con clear:right; o entrambi lati con clear:both;

NB: il valore di default è clear:none;

3. Si applica solo a elementi di blocco

Altro articolo consigliato da leggere:

• Il clearfix: come evitare che lo sfondo d’un blocco contenitore sparisce quando contiene elementi ‘floatati’

Condividi questo articolo su

css, css clear, css clear both, css clear left, css clear right, css float, css float left, css float right

5 commenti

Rimani aggiornato con il RSS Feed