ClearFix e MicroClearFix

4 maggio 2011 - Che cos’è ClearFix e cosa fa? MicroClearFix è un aggiornamento del codice ClearFix; quest’ultimo è un metodo di annullamento float (qui l’articolo su altri tipi di annullamento) che si basa sullo pseudo-elemento :after, il suo modo di operare consiste nel generare un contenuto posizionato dopo il contenuto dell’elemento stesso, in poche parole è come se [...]

Che cos’è ClearFix e cosa fa?

MicroClearFix è un aggiornamento del codice ClearFix; quest’ultimo è un metodo di annullamento float (qui l’articolo su altri tipi di annullamento) che si basa sullo pseudo-elemento :after, il suo modo di operare consiste nel generare un contenuto posizionato dopo il contenuto dell’elemento stesso, in poche parole è come se generasse un <div style=”clear:both”></div> prima della chiusura dell’elemento.

Le variazioni

Le proprietà del metodo ClearFix subiscono delle variazioni nei casi di “collasso dei margini”, vediamo le 3 tipologie di codice dato il seguente codice html:

<div class="container clearfix">
    <div class="box">Float</div>
    <div class="box">Float</div>
</div>

1. I margini verticali non collassano in IE < 8 ma il margine superiore collassa negli altri browser:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

2. I margini verticali non collassano in IE < 8 ma collassano su altri browser:

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

3. I margini non collassano in nessun browser:

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}

Tutte le proprietà utilizzate al di fuori di “content” servono sostanzialmente per nascondere il contenuto dell’elemento generato.

Quali sono le novità in MicroClearFix?

Il MicroClearFix si può definire come un hack del suo predecessore, il codice è stato ridotto e si basa sugli pseudo-elementi :before e :after introdotti da Thierry Koblentz’s “clearfix reloaded” nell’ultimo metodo (3).

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

Se guardiamo attentamente il codice notiamo che la proprietà “content” genera un contenuto vuoto, quindi non ci sarà nessun carattere indesiderato che compare all’interno dell’elemento. Si evitano così gran parte delle proprietà usate nei metodi precedenti.