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.