Salve a tutti e benvenuti nel mio blog! 🙂

Oggi vi parlerò di due topic: il float e il clearfix.

Nell’utilizzare questi attributi capita molto spesso di trovarsi di fronte a diversi problemi (che ora vi mostrerò), ma ovviamente c’è sempre la soluzione a tutto! 😉

Ecco il principale problema

Ipotizziamo di voler creare una pagina HTML in cui un <div> funge da contenitore e racchiude diversi elementi flottanti (come mostrato nella figura sottostante).


1


Dato che gli elementi flottanti sono rimossi dal flusso della pagina, il <div> contenitore collassa su un’unica riga (in quanto al suo interno non vi sono presenti altri elementi). In realtà, ci saremmo aspettati di vedere il bordo del div racchiudere tutte e quattro le colonne.
Per risolvere tale problema esistono diverse soluzioni e fra queste ne vedremo tre, che sono le più usate con i browsers “moderni”.

 

Soluzione 1 – Usare un DIV con clear:both

Una prima soluzione prevede l’aggiunta di una classe “clearfix” e dell’attributo CSS clear: both.

Ancora prima di chiudere il <div> contenitore, aggiungiamo un div con classe clearfix. Quest’ultimo non potrà che posizionarsi sotto tutti gli elementi flottanti. Inoltre, dato che è contenuto nel div “container”, e dato che appartiene al flusso della pagina, determina l’estensione del bordo del div padre. Notate che in questo modo il problema viene risolto! 🙂


1

 

Soluzione 2 – Usare lo pseudo selettore :after sul tag padre

Prima di descrivere questa soluzione è necessario introdurre lo pseudo-selettore :after.

Questo selettore consente di aggiungere dei nuovi elementi HTML al documento, senza però la necessità di cambiare il codice HTML, ma semplicemente andando ad agire sul CSS.

Lo pseudoselettore :after seleziona la parte di un elemento della pagina esattamente prima della chiusura dell’elemento stesso. Vediamo meglio questa soluzione direttamente con la pratica! I due esempi di codice seguenti si comportano esattamente nello stesso modo!

Nel primo esempio, prima di completare il div “test” è stato aggiunto un altro div con il testo di colore rosso.


1

Vediamo ora il secondo esempio:


1

In questo caso, la dichiarazione CSS per #test:after, va interpretata in questo modo:

Prima che l’elemento con id “test” venga chiuso (#test:after), aggiungi un elemento di blocco (display: block), il cui contenuto è il testo “Il div test sta per finire” (content: “Il div test sta per finire”), il cui colore è rosso, il font è in grassetto e ha un margine dall’elemento precedente di 50px.


Se ora vi è tutto più chiaro, il clearfix sarà altrettanto semplice!

Nella prima soluzione abbiamo aggiunto un <div> prima che l’elemento con classe container venisse chiuso (.container:after), un div ovvero un elemento di blocco (display:block;), senza alcun testo al suo interno (content: “”), la cui proprietà “clear” è stata settata su “both”.

In pratica, la soluzione 1 e la soluzione 2 sono pressoché espressione dello stesso concetto, ma scritta in due modi leggermente differenti! 🙂


1

Soluzione 3 – Usare overflow

La terza, ed ultima soluzione, è quella di utilizzare la proprietà css “overflow: auto” sul tag contenitore. A differenza delle soluzioni precedenti, il vantaggio di usare “overflow: auto” è quello di non dover aggiungere alcun div “fittizio”, usato solo per applicare il “clear”.


1

SVANTAGGI

Lo svantaggio è che vi sono potenzialmente due piccoli problemini:

  1. Questa tecnica è scarsamente supportata dai browser arcaici (soprattutto da Internet Explorer)
  2. Esistono alcune circostanze in cui overflow: auto determina la comparsa di orripilanti barre di scorrimento inaspettate, come nell’esempio mostrato sotto. Nella maggior parte dei casi questo accade quando si utilizza il posizionamento “absolute all’interno della pagina.

problema con Overflow


1

Problema con  Clearfix


1

Quindi, quale clearfix va bene per me?

Se non avete esigenza di supportare i browser “arcaici” e se gli elementi inclusi nel blocco contenitore non usano il posizionamento “absolute”, vi consiglierei di utilizzare la soluzione 3.

Altrimenti, potete utilizzare la soluzione che più vi piace tra la 1 e la 2. Entrambe sono valide, non esiste un vincitore in senso assoluto! Scegliete quella che vi sembra più semplice! 🙂

 




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.