ClearFix e MicroClearFix

Che cos’è ClearFix e cosa fa? MicroClearFix è un aggiornamento del codice ClearFix; quest’ultimo è un metodo di annullamento float […]
ClearFix e MicroClearFix

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.

Approfondisci

Se vuoi approfondire il concetto puoi farlo leggendo la fonte di questo articolo.

Che ne pensi?

E tu cosa ne pensi del MicroClearFix come metodo di annullamento float?

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github