The Clearfix: Forzar a un elemento a auto-limpiar a sus hijos - Trucos CSS

Esto te hará bien estos días (IE 8 en adelante):

.group:after ( content: ""; display: table; clear: both; )

Aplíquelo a cualquier elemento padre en el que necesite borrar los flotantes. Por ejemplo:


Usaría esto en lugar de borrar el flotador con algo como en la parte inferior del padre (fácil de olvidar, no manejable directamente en CSS, no semántico) o usar algo como overflow: hidden;en el padre (no siempre quiere ocultar el desbordamiento ).

¡Ahora un poco de historia!

Esta fue la versión popular original, diseñada para admitir navegadores tan antiguos como fuera posible:

.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 */

Luego hubo una versión más limpia documentada aquí por Jeff Starr, basada en el hecho de que nadie usa IE para Mac, que es de lo que se trataba el hack de barra invertida.

.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */

Luego se hizo popular el uso de "grupo" como nombre de clase, que es más agradable y más semántico (a través de Dan Cederholm). Además, la contentpropiedad ni siquiera necesita el espacio, puede ser una cadena vacía (a través de Nicolas Gallagher). Entonces, sin ningún texto, no font-sizees necesario (Chris Coyier).

.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */

Por supuesto, si elimina el soporte de IE 6 o 7, elimine las líneas asociadas.

Actualización 18 de mayo de 2011: Nicolas Gallagher de nuevo con el "micro" clearfix. Vea también este material adicional.

.group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )

Consulte la parte superior de esta página para obtener la versión más moderna de clearfix.

En el futuro, es posible que podamos hacer:

.group ( display: flow-root; )