CSS clearfix

La tecnica di clearfix illustrata di seguito ci aiuta a gestire correttamente, tramite una piccola regola CSS, gli elementi contenitori che contengono un elemento in float.

Vi ho già confuso? Tranquilli, è più semplice di quello che pensate.

Webdesign

Per webdesign, noi intendiamo l’attività di scrittura di HTML e CSS per costruire un sito (o un template riutilizzabile).

Se sapere cos’è un float, potete dire che fate webdesign 🙂

In tal caso vi sarà capitato sicuramente questo caso:

<div id="container">
  <div id="sidebar">...</div>
  <div id="main">...</div>
</div>

E nel CSS:

sidebar{float: left}

Risultato? Se la sidebar  è più lunga del contenuto centrale, la div #container non arriverà fino in fondo alla pagina.

A questo problema sono state presentate simpatiche soluzioni tra cui le mitiche faux-columns (uno sfondo messo sul body per fingere che la parte centrale arrivi fino in fondo).

Clearfix

Per risolvere questo problema sono state inventate tecniche di clearfix.

Ne esistono diverse: sono tutte volte a ottenere lo stesso risultato, ovvero “allungare” il contenitore per contenere interamente (in altezza) un elemento float.

Tutte si basano più o meno sullo stesso principio: creare un contenuto dinamico alla fine dalla pagina e renderlo “clear”, ovvero libero da ogni float.

Una delle soluzioni attualmente più in voga è la seguente:

#container:before,
#container:after {
    content:"";
    display:table;
}
#container:after {
    clear:both;
}
#container {
    zoom: 1;
}

In questo modo, si crea un elemento vuoto prima e dopo, con una modalità particolare di display (“table”) che ottiene il risultato desiderato.

Nota: la proprietà “zoom: 1” è un hack per far funzionare il tutto anche su browser più vecchi, quali Internet Explorer 6 e 7.

Classe anzichè Id

Nel nostro esempio abbiamo applicato le regole direttamente all’elemento contenitore, ma dato che questa situazione può ripetersi in diversi punti della pagina, ha probabilmente più senso usare una classe che può essere riutilizzata. Ad esempio:

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
 .clearfix {
     zoom: 1;
 }

In questo modo basta assegnare la classe “clearfix” a qualsiasi elemento contenitore che vogliamo “allungare” fino a includere tutti gli elementi float contenuti.

Facile e veloce, con poco codice: una soluzione ideale.