Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Entendiendo la propiedad float de CSS

Entendiendo la propiedad float de CSS 22.OCT.15

Alvaro José Rios Ch
Fundador WebBizarro

La propiedad float de CSS permite mover elementos y posicionarlos en el viewport del sitio web, sin embargo hay algunas cosas que debemos saber sobre esta propiedad.

 

Qué elementos no flotan

Los elementos con position fixed o absolute no flotan, si alguna vez que un elemento no flota correctamente verifique esto primero y haga los cambios correspondientes.

 

Qué le pasa a un elemento cuando flota

Un elemento que flota simplemente se mueve a la izquierda o la derecha dependiendo del caso hasta que se encuentre con la pared del contenedor. En caso de que se encuentre con otro elemento que flota entonces se detendrá en dicho elemento. Cuando ya no hay espacio los elementos se mueven hacia abajo.

Hay otros dos comportamientos relacionados al float.

Primero los elementos que flotan se convierten en elementos de bloque, es decir como si se le aplicara display:block y los elementos que tienen display:inline-table pasan a display:table.

El segundo es que el ancho y alto de los elementos se ajusta al contenido del mismo a menos que se establezca el width y el height en el CSS.

 

Qué pasa con los hermanos de los elementos que flotan

Como ya dije anteriormente los elementos que flotan son predecibles solo se mueven a la izquierda o derecha, sin embargo los hermanos si pueden tener un comportamiento extraño ya que haran todo lo posible para dar cabida al elemento que flote.

Los elementos de texto e inline simplemente rodean el elemento que flota, sin embargo los elementos de bloque envuelven a los elementos que flotan incluso dejando de lado a sus propios elementos para hacer esto.

Como pueden ver en el ejemplo tenemos dos elementos uno verde y un gris, ambos son hermanos y el gris tiene una imagen, ahora vamos a hacer que el elemento verde flote a la izquierda.

Ahora el elemento gris envuelve al elemento verde incluso dejando afuera a la imagen. Si colocamos overflow:hidden al elemento gris veremos que ahora se ubica al lado del elemento que flota.

Qué pasa con los padres de los elementos que flotan

Los padres no se preocupan mucho por los hijos que flotan, simplemente no deben salir de los limites izquierdos y derechos, sin embargo no es lo mismo con la altura del padre, si un elemento que flota supera en tamaño al elemento padre, este último no cambiará su tamaño, una vez más este comportamiento se corrige con un overflow: hidden.

Cómo limpiar un float

Antes hablamos de que con el overflow:hidden podemos darle el tamaño correcto a los padres y que los hermanos se posicionen en el lugar adecuado, sin embargo hay otro método que permite a los hermanos convivir con un elemento flotante sin problemas y ese es el atributo clear, si le colocamos el valor left, limpia todos los float del lado izquierdo, de la misma forma para el valor right y si colocamos both entonces lo aplica a ambos lados.