Después de golpearme repetidas veces la cabeza durante repetidas horas contra la mesa me he dado cuenta que el método clearfix para conservar el alto de los contenedores con elementos flotados (si no sabes de que hablo deja de leer o googlea) tiene un error.

El tema está en que al aplicarlo al ultimo contenedor de nuestro esquema dom, queda un espacio en blanco a continuación de éste, por lo que no conseguimos que aparezca pegado al borde inferior de la pantalla.

Aclarar que en algunas de las webs donde está publicado el método, éste no tiene el error.

El problema es este:
content: "."

Cuando debería ser:
content: " "

Aprovecho para poner un breve repaso a los distintos métodos clearfix que he encontrado.

Método 1:

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }


Método 2:

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix { zoom: 1; }
*:first-child+html .clearfix { zoom: 1; }


Método 3 (no es clearfix pero soluciona el tema de los floated elements):

.clearfix{ overflow:auto; heitght:1%; }