Una de las cosas más útiles que me enseñó mi profe Luis Herrero cuando estudiaba front, fue utilizar overflow:hidden en lugar del poco elegante clearfix.
Utilizando sus propias palabras:
«Cuando un contenedor tiene a todos sus hijos flotando, se queda sin altura».
Esto impide que podamos ponerle un background, que tengamos límites para «empujar» elementos por arriba y por abajo, que podamos usar padding o margin en el elemento padre, etc…
No voy a entrar en las razones del porqué overflow:hidden funciona como os voy a contar, pero básicamente lo que hace es provocar que el contenedor crezca tanto como sus hijos, es decir, los «envuelve». No hace falta que os diga lo necesario que es este comportamiento para situaciones como por ejemplo, pintar un menú.
Ejemplo simple:
See the Pen ntjqL by Diana (@diana_aceves) on CodePen.
Quitad el overflow y veréis como el background desaparece, el ul deja de tener altura.
Hay más formas de limpiar los floats, pero eso ya lo dejo para otro post más largo.