el clearfix que tu muestras se usa para cuando tienes varios elementos con la propiedad float y deseas que el siguiente ya no siga el flujo de los elementos flotantes (que no se vea afectado por el float de sus hermanos) y se coloque abajo de ellos y no aun lado.
Tambien es comun cuando tienes un div padre con borde puedes apreciar que este no toma la altura de lo elementos hijos cuando estos tienen un float... Algunos desarrolladores para solventar el problema colocan al final un elemento con clear:both para hacer que el div padre tome la altura correctamente, aun cuando es mas recomendable usar un overflow:hidden.
Tambien puedes ver lo que dice la w3c
www.w3schools.com/Css/pr_class_clear.asp