Posicionado y disposición: La propiedad float

La propiedad float permite llevar un elemento fuera del flujo normal de la página hacia a lo más izquierda o derecha posible de un elemento contenedor.

Todos los elementos que estén dentro del elemento contenedor estarán alrededor del elemento con la propiedad float. Sin embargo, esto se aplica si los elementos están adyacentes al elemento flotante.

Cuando especificas la propiedad float de un elemento, debes establecerle un width para indicar el tamaño de la caja. De otra forma, automáticamente ocuparía el 100% de espacio de la caja contendora, dejando sin espacio a los elementos que estén alrededor del elemento flotante.

Valores

Valor Descripción
Left La caja flota hacia la izquierda del elemento contenedor, y los elementos del contenedor se sitúan a la derecha de él.
Right La caja flota hacia la derecha del elemento contenedor, y los elementos del contenedor se sitúan a la izquierda de él.
None La caja no flota y permanece donde debería estar en un flujo normal o normal flow.
Inherit La caja toma la misma propiedad que el elemento contenedor.

Cuando una caja usa la propiedad float, los márgenes verticales no se colapsan por encima o por debajo como lo harían elementos block en un normal flow.

propiedad float css

Ejemplo con propiedad float

 

Posibles problemas

Ahora voy aclarar lo que había comentado anteriormente con los elementos adyacentes. El elemento float es rodeado por los elementos adyacentes. En este caso aside tiene como elementos adyacentes <h1> y un párrafo. Esto quiere decir que si el alto del aside(en este caso 140px)  llega al último párrafo, pasaría por encima de este en vez de colocarse.

propiedad float adyacente

Cuando un elemento flotante ocupa un elemento no adyacente

Esto se solucionaría poniéndole un clear al párrafo. Esta propiedad la explicaré en el siguiente post.

Otro de los problemas que puede surgir cuando se usa la propiedad float es que la caja no contenga los elementos que floten.

propiedad float contenedor

Esto se puede solucionar de 2 formas. Una es añadiendo la propiedad overflow:hidden al elemento contenedor. Si no sabes en que consiste la propiedad overflow te recomiendo este post. La otra manera es que el contenedor también flote añadiéndole un float left o right.

propiedad float contenedor solucion

Por último añadir que si una serie de elementos flota hacia el mismo lado, irán uno al lado de otro hasta ocupar todo el espacio del contenedor.

Y hasta aquí como usar la propiedad float, espero que os sea muy útil. A seguir picando 🙂