Propidades float y clear de CSS

En este artículo hablaremos sobre una de las propiedades de posicionamiento más utilizadas de todo CSS, la propiedad float. Float nos permite otorgar a un elemento (cualquiera como un DIV, P…) la propiedad de flotar (hacía la derecha, hacía la izquierda, ninguno o heredar).

La propiedad float posiciona una caja moviéndola todo lo posible a la izquierda o derecha desde su posición original

Modelo flotante vs modelo inline/block

Cuando creamos un elemento de tipo float, este flotará y tendrá un posicionamiento totalmente diferente a los que ya vimos: inline o block. Por tanto, indicándole que flote, le estamos indicando que no siga el flujo/modelo tradicional de inline/block del que hablábamos en el artículo: Diferencias entre display: block, inline, inline-block y none. Es decir, cuando posicionamos un elemento como flotante, este, se posiciona bajo otro tipo de posicionamiento, el modelo de posicionamiento flotante lo que se traducirá en que automáticamente la caja se convierta en flotante y no responderá a atributos como display: inline o display:block.

Tipos de float

Atributos de la propiedad de float:

  • Left: flota el elemento a la izquierda de su contenedor.
  • Right: flota el elemento a la derecha de su contenedor.
  • None: restringirá (prohibirá que el elemento flote).
  • Inherit: heredará la configuración flotante del elemento padre.

float: left | right | none | inherit;

Ejemplo de partida sin float

Vamos a ver un ejemplo:

El resultado será:

Hay que destacar que hemos limitado el ancho de la web hasta 500px con el fin de reproducir mejor el ejemplo.

Hasta aquí, tenemos una web que sigue el flujo de diseño tradicional en el que los elementos se posicionan en línea o en bloque. En este caso en particular, los divs son elementos en bloque por lo que se posicionan uno debajo del otro. De hecho, esto mismo, lo podemos ver desde el inspector de tal manera:

Añadiendo float right al div amarillo

Si ahora le ponemos float right a la caja dos:

Podemos ver que esta se desplaza hacia la derecha pero que a su vez, y que el resto de cajas se tratan de ajustarte dentro del espacio que les queda. Vemos que tenemos dos filas, dos tipos de comportamiento, el comportamiento del modelo (inline, block) o el comportamiento flotante.

Añadiendo otro float right al div verde

Si le añadimos la propiedad float:left al div verde ¿Qué pasará?

¿Dónde se posicionará el div verde? ¿Debajo del div amarillo? ¿En el lado izquierdo del div amarillo? ¿En el lado derecho?

Vamos a verlo: la respuesta correcta es al lado, debido a que ya tenemos un elemento posicionado a la derecha (el div amarillo) y ahora le metemos otro elemento flotante a su derecha (el div verde) si sumamos sus pixeles 100 de cada div más algo de margenes no superan los 500px a los que hemos limitado el documento. Y por tanto,  caben en la misma línea y el div verde se posicionará al lado más derecho posible después del div amarillo ya que este estaba ya situado.

Modificando el width a 465px del div verde que flota a la derecha

Pero ¿Qué pasará si le añadimos width: 465px; al contenedor verde?

¿Dónde se posicionará? ¿Seguirá al lado del div amarillo? ¿Bajará abajo? Y ¿Qué pasará con el contenedor azul? En este caso, el div verde bajará abajo ya que ya no cabe en la fila junto al div amarillo

Modificando el width a 350px del div verde que flota a la derecha

¿Qué pasará si le añadimos width: 350 px; al contenedor verde en vez de 465px?

Pues que la suma de 350px (del div verde) + 100px (del div amarillo) + algunos px de los márgenes es inferior a los 500 px a los que hemos limitado el html. Esto supone que caben ambos contenedores en la fila. Aunque “por los pelos” literalmente (tan solo algunos px) el div verde, seguirá compartiendo la fila con el div amarillo.

Pero nos encontramos que tenemos otro problema, que el contenedor azul está tapado. Y su contenido ha bajado a la fila inferior.

Resolviendo el conflicto

¿Qué está pasando? Pues que todos los elementos a partir de que definimos un elemento como float (desde el primero) tienen un comportamiento flotante como si de globos se tratase suben todo lo que se puede y si no lo manejamos bien pueden tener comportamiento extraños como el de arriba. Es decir, todos están flotando a partir del primero y van subiendo y se ajustan como pueden

¿Cómo lo resolvemos esto? Necesitamos indicarle que por ejemplo al div azul no queremos que sea flotante que es el fin de los elementos flotantes.

Para ello, necesitamos aplicar la propiedad clear al div azul para indicarle que el div verde será el último que flote.

Tipos de valores de float

Podemos aplicar a la propiedad clear de CSS los siguientes valores:

  • Left: limpiará el lado izquierdo (el float: left).
  • Right: limpiará el lado derecho (el float: right).
  • Both: limpiará ambos lados (el float: right y el float:left).

Aplicándolo al problema anterior

En este caso en particular, solamente tenemos floats a la derecha (right) por lo que con hacer un clear: right funcionaría.

También podemos utilizar clear: both y también nos funcionará:

Ambos darán el mismo resultado:

Float right sobre div amarillo y azul

Vamos a ver otra casuística en la que todos los elementos a partir del primero que flote tienen un comportamiento aún más extraño. Vamos a ver un ejemplo en el que flotamos el div amarillo y azul a la derecha. Esta vez, al tener el div verde de por medio, el comportamiento es totalmente diferente:

El resultado será:

Esto, se produce debido a que el div azul tiene por delante al div verde que no tiene un float left. Y por ello, le impide posicionarse junto al div amarillo.

Principal uso de float

El principal uso de float es el de situar una imagen en un lateral junto a un texto. Vamos a ver un ejemplo:

El resultado será:

Conclusión

Bueno cómo podéis ver, float, es una propiedad super potente pero que también nos puede dar muchos dolores de cabeza si no entendemos al 100%. Espero que os haya gustado el artículo y que si algún día tenéis un conflicto con float, seáis capaces de resolverlo o de buscar una solución. Saludos

2 comentarios

  1. I every time used to study article in news papers but now as I am
    a user of web so from now I am using net for content, thanks to web.

  2. I’m curious to find out what blog platform you have been using?

    I’m having some minor security problems with my latest site and I’d like to find something
    more risk-free. Do you have any solutions?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar