> Faqs > Uso de "clearfix" en CSS

Uso de "clearfix" en CSS

Hola. No tengo claro qué es lo que hace el siguiente código CSS y para qué y cuándo se utiliza.

.clearfix::after {
  content: ""; 
  clear: both;
  display: table;
} 

Lo he visto en algunas webs y lo tengo que usar en un trabajo pero me gustaría entender el concepto. Agradecería muchísimo que alguien me sacara de dudas, muchas gracias de antemano.

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Ese código es un tanto antiguo, la verdad, puesto que la necesidad del "clearfix" ya no es actual.

Antiguamente se maquetaba con CSS usando "float", de modo que las capas ocupasen espacios a la derecha o la izquierda. Al haber un float el contenedor padre no se hacia tan grande como su contenido y se tenía que usar un hack para conseguir que los fondos se dibujasen en todo el espacio necesario.

Es complicado de explicar en pocas palabras. Lo mejor es que te leas un artículo que te lo explica con mayor detalle. No usa justamente los mismos estilos para producir el mismo efecto de tu clearfix, pero el concepto y el problema que se desea arreglar es exactamente el mismo.

Solución al problema de float en maquetación CSS

A propósito, hoy lo ideal es maquetar con Flexbox o CSS Grid Layout.

Santiago
54 2 5 2