HTML / CSS - Magia dello Sticky Footer

Salve a tutti,
cercavo un codice per ottenere l'effetto di avre il footer sempre a fondo pagina e finalmente ho letto un articolo riguardante lo Sticky Footer.L'ho provato e funziona benissimo ed è ben supportato da molti browser.
Ecco il codice:

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Nascondi a IE su Mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* Fine Nascondi a IE su Mac */



Chiedo se qualcuno potrebbe gentilmente spiegarmi il funzionamento di queste linee di codice.
Ringrazio a tutti.

Vedo che nessuno sa risponderti in modo preciso, allora ci provo io in modo molto blando. Quel codice è l'equivalente dell' aggiungere un

<div style="clear:both;"></div>

in fondo ad un div contente elementi con l'attributo float questo fa in modo che il div prenda l'altezza effettiva del suo contenuto. Spesso si applica nel caso in cui il div padre presenti un background, infatti nel caso un contenitore contenga solo elementi float prenderà un altezza di 0 dando l'idea di non esistere. Se analizziamo il codice ci accorgiamo che esso inserirà uno pseudo elemento con contenuto "." dopo il blocco con la classe clearfix, questo pseudo elemento si occuperà di ripristinare la consistenza del div padre. Per capirlo a pieno devi pensare che float estrae l'elemento della pagina e lo posiziona come se fosse fluttuante sulla pagina non influendo piu sul padre, clear invece "riporta i piedi per terra" all'elemento.
Nel tuo caso pero non capisco bene per cosa tu l'abbia usato....
Float non è un attributo di facile comprensione pero spero di aver reso l'idea del suo funzionamento e della classe clearfix.
Se hai bisogno di chiarimenti prova a chiedere e vediamo se posso aiutarti.

grazie mille