Yo no entiendo la relación que se está haciendo aquí entre los clear de los float y el clearfix.
A ver, cuando a un float le das "clear:both" lo que hace eso es evitar que haya otros elementos float a sus lados, es decir, imagínate que tienes dos float colocados horizontalmente, si a uno de ellos le das "clear:both" el segundo se bajará ya que acabas de indicar que no puede tener floats a su lado.
Por el contrario el "overflow:hidden" es un clearfix para evitar que un elemento padre cuyos hijos son floats colapse (un elemento float no forma parte del flujo de la web, y de ahí que su padre no los "detecte" y colapse como si estuviese vacío), con la propiedad "overflow:hidden" aplicada al padre, este no colapsa y se estirará lo necesario para envolver a sus hijos. Hay que tener en cuenta que este no es el comportamiento normal de overflow:hidden, que sirve para que si algo no cabe en el contenedor simplemente no se muestre, pero para estas cosas funciona así, no le busques explicación porque creo que no la tiene.
La alternativa a posicionar mediante floats es posicionar mediante "inline-block", dandole esa propiedad a un elemento block (div por ejemplo) puedes conseguir que haya divs unos al lado de otros pero se sigan comportando como blocks. En este caso sí que podrías usar relative/absolute/fixed para afinar su posición ya que están en el flujo de la web.
Por último lo del flex. De esto no tengo repajolera idea porque se supone que es una propiedad que aun no está muy soportada por navegadores y digamos que es el futuro, próximo, eso sí, pero de momento se usa poco. Más info sobre el flex aquí:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/