Todo sobre float
¿Qué es float?
Float es una propiedad de posicionamiento en CSS, es decir, el cómo se ubican los elementos dentro de un documento HTML. Podemos observar un ejemplo de float en un documento de word cuando “cuadramos” la imagen, o sea, que el texto se ajuste alrededor de la imagen. Acá un ejemplo:
No les ha pasado que si abren una imagen en word, esta, al principio no deja que ningún elemento se ponga a su costado.
Pero podemos modificar una propiedad a las imágenes para que el texto pueda rodearla.
Así como el los documentos word, también pasa esto en el diseño web. A los elementos de la página que se les aplique la propiedad float, el texto fluirá alrededor de ellos.
Ejemplo:
Sin float:
La propiedad
floatposiciona una caja moviéndola todo lo posible a la izquierda o derecha de su posición original
Valores de float
- none: El elemento no flota. Este es el valor inicial.
- left: El elemento flota a la izquierda de su contenedor.
- right: El elemento flota a la derecha de su contenedor.
- inherit: El elemento hereda la dirección de flotación de su padre.
Usemos los valores de float:
(Mira el resultado en el codepen del final)
En el siguiente ejemplo tenemos divs a los que le hemos dado color y tamaño.
Por defecto todos son display block y tienen float none. Pero qué pasa en caso no quisiéramos que esta sea nuestra estructura, sino que los divs morados redeen al div celeste. Entonces se nos puede venir a la cabeza la idea de cambiar la propiedad de display: block a display:inline-block(te recomiendo que descomentes la línea 5 y comentes la línea 4 para ver qué pasa), este resultado no va ser exactamente el que queremos. Si queremos un resultado como el de abajo tendremos que aplicarle la propiedad float: left a todos los divs para que estos comiencen a flotar y se acomoden hacia la izquierda.
Como en el siguiente codepen:
Float vs Position: Absolute
Los elementos flotantes siguen siendo una parte del flujo de la página web . Esto es claramente diferente de elementos de página que utilizan posicionamiento absoluto. Elementos de la página con posición absoluta se retiran del flujo de la página, como cuando el cuadro de texto en el diseño de impresión se le dijo que ignorar la envoltura de la página.
En este caso “float : left” hace que la imagen comience a flotar hacia la izquierda respetando el flujo de los elementos. Es por eso que los demás elementos (como textos) se colocan automáticamente después del elemento flotante
Si en vez de utilizar float utilizamos “position: absolute”, la imagen dejará de ocupar un espacio y los textos se pegarán a la izquierda. Para recompensar el espacio que debería de tener la imagen agregamos un padding a la izquierda.
Después de mostrarte las dos formas, ¿Cuál elegirías tú?
Clear
Es una propiedad que se utiliza para controlar el comportamiento de los elementos flotantes.
Como ya sabemos, los elementos después de un elemento flotante fluirán a su alrededor. En caso no quisiéramos que eso suceda con clear se especifica que un elemento no admite un flotante sobre su izquierda, sobre su derecha o a ambos lados.
Valores de clear
- none: Predeterminado. Permite elementos flotantes en ambos lado.
- left: No se permiten elementos flotantes en el lado izquierdo.
- right: No se permiten elementos flotantes en el lado derecho.
- both: No se permiten elementos flotantes en el lado izquierdo o derecho.
- inherit: Hereda el valor de su elemento padre.
Veamos un ejemplo: Queremos hacer un navegador de páginas. Entonces le damos la propiedad de float y le ponemos lo valores dependiendo de a qué lado queremos que vaya.
Pero observamos que el texto comienza a flotar alrededor ellos y en este caso no queremos eso, entonces la propiedad clear llegará al rescate.
Como se dijo antes : Si le aplicamos la propiedad clear a un elemento, este, no permitirá un elemento flotante en alguno de sus lados(dependiendo de qué valor le demos)
Por lo tanto le aplicamos la propiedad clear con el valor both al párrafo y se verá así.
Clearfix
El maravilloso hack clearfix nos sirve para los contenedores de elementos float.
Normalmente si tenemos un elemento float dentro de un de un contenedor, éste, se reducirá y no contará al elemento flotante para su alto. Como en el siguiente caso:
En el caso de que no quisiéramos que esto suceda clearfix va a ser nuestro mejor amigo.
¿Cómo se utiliza Clearfix?
Clearfix se utiliza dándole la propiedad “overflow: auto” esta propiedad hará que el contenedor cuente a los elementos flotantes para su heigth también.
Un poco de humor:
