Hoy me he encontrado con Perishable Press, un blog enfocado sobre todo a programación para web y sobre la plataforma WordPress. Entre sus últimos artículos he encontrado uno que me ha parecido especialmente interesante. En dicho artículo analiza la validez de los métodos de clearfix existentes y los combina para obtener un resultado adecuado para cualquier terreno.
El resultado es este:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
Los cambios principales son el reemplazo del punto (.) por un espacio como contenido para el bloque que realiza el clear y la adición de una medida nula para dicho contenido (font-size: 0).
3