The Clearfix: Forzar a un elemento a auto-limpiar a sus hijos | Programar Plus

Esto te hará bien en 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:

<div class="group">
  <div class="is-floated"></div>
  <div class="is-floated"></div>
  <div class="is-floated"></div>
</div>

Usaría esto en lugar de limpiar el flotador con algo como <br style="clear: both;" /> en la parte inferior del padre (fácil de olvidar, no manejable en CSS, no semántico) o usando algo como overflow: hidden; en el padre (no siempre desea 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 un poco 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). También el content la propiedad ni siquiera necesita el espacio, puede ser una cadena vacía (a través de Nicolas Gallagher). Luego, sin ningún texto, font-size no es 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, podríamos hacer:

.group {
  display: flow-root;
}