¿Qué es clearfix?

Clearfix es una clase de CSS2 que se aplica a los divs que contienen elementos flotantes.

Lo complejo con los elementos flotantes (float: left; / float: right;) es que no obligan a que el tamaño de la caja que lo contiene se ajuste a su contenido. Por lo mismo, si se tiene una DIV con un menú flotante a la derecha, quedaría de la siguiente manera:

Por el contrario, un DIV (texto a la izquierda) con la propiedad clearfix aplicada, quedaría de la siguiente manera:

Por lo tanto, sin importar el largo de la caja que flota a la derecha, el DIV que la contiene siempre se ajustará al tamaño de los elementos que flotan en su interior.

El clásico .clearfix

Si se googlea la palabra clearfix, se van a encontrar millones de resultados con un código muy simiar a este:

.clearfix:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix{
	display: inline-block;
}
/*\*/* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}/**/

Este código es la maravilla que permite hacer que los elementos se comporten de manera clearfixeada.

Sin embargo, he leído por ahí que con las nuevas versiones de los navegadores, van apareciendo "mejoras" que evitan que el clearfix se comporte como deba, y hay que estar haciendo cambios al código y buscando en internet la "nueva versión" del clearfix.

Una alternativa a .clearfix

Antes de "descubrir" la clase clearfix, tuve que ingeniarmelas yo mismo para conseguir un resultado similar, asique recurrí a lo obvio: un DIV vacío que tuviese la propiedad "clear: both;". Lo llamé clear_fix (nótese el guión bajo).

Claro: funcionó...en Firefox. Pero como era de esperarse, en Internet Explorer 6 y 7 aparecían espacios (que yo nunca había puesto) dentro de este DIV. Asique, finalmente, después de varias versiones de "mi" clearfix llegué a un clear_fix definitivo que quedó asi:

.clear_fix{
	clear: both;
	overflow: hidden;
	height: 0;
	max-height: 0;
}

.clearfix v/s .clear_fix

Ambas clases cumplen el mismo objetivo: forzar a un DIV que contenga elementos flotantes a que se ajuste al tamaño de su contenido.Sin embargo, ambas clases presentan algunas diferencias:

• La clase .clearfix posee un código muy complejo, a diferencia de la clase .clear_fix que tiene un código muy corto y simple (sólo 4 propiedades).
• Para utilizar el .clearfix se aplica solamente una clase a algún DIV existente, lo cual permite mantener el código limpio. La clase .clear_fix requiere de un DIV vacío adicional, dentro de cada contenedor que posea elementos flotantes, lo cual ensucia el código.
• La clase .clearfix utiliza hacks para lograr solucionar los problemas de compatibilidad entre los diferentes navegadores. La clase .clearfix, al ser mucho más simple, no utiliza ningún hack ni truco extraño.
• Al no utilizar propiedades nativas de cada navegador, la clase .clearfix debe ser actualizada o "mejorada" con cada actualización de los navegadores. la clase .clear_fix no necesita ser actualizada, pues utiliza elementos "legales" (suponiendo que existan cosas ilegales) y nativos de cada navegador.

Entonces: ¿cuál elijo?

Por ser mucho más conocida y por un tema de limpieza en el código, claro que debería ser mejor utilizar .clearfix. Sin embargo depende de la manera en que se trabaje: hay quienes prefieren dejar evidenciado en el código el uso de DIVs para corregir los problemas de estructura, y utilizar un CSS más compatible. Hay quienes prefieren un código limpio, o están acostumbrados al uso de .clearfix.

Dependiendo del destino del sitio, puede ser preferible utilizar un estilo que asegure mantenerse vigente durante muchas actualizaciones de los navegadores (.clear_fix). En algunos casos, si se utilizó un .clearfix antiguo, puede ser que el sitio deba ser actualizado para que se vuelva a ver bien en todos los navegadores.

Sin embargo, cada uno elije la manera que más le acomode: yo sólo propongo estos métodos, y ustedes deciden cual utilizar.