CSS: Flotación

Con la primera versión de CSS se introdujo la posibilidad de diseñar elementos flotantes, en los que el texto fluye alrededor de las imágenes. Este efecto se consigue con la propiedad float. La flotación incluso permite estructurar el contenido de una web en múltiples columnas.

Cuando se hace “flotar” una imagen o cualquier otro elemento, ésta se desplaza hacia la derecha o la izquierda, según se haya indicado, y permite que el texto se sitúe en el otro lado. La flotación se puede limpiar con la propiedad clear: hará que el elemento flotante se desplace hacia abajo.

Propiedades descritas en este artículo:

Tipos de elementos

Para entender como funcionan los elementos flotantes, primero es necesario conocer los tipos de elementos HTML. Es importante saber y entender cómo el navegador web muestra el contenido según la tipología, ya que esto es determinante en el flujo normal de los elementos en un documento HTML.

Con el fin de representar cada elemento HTML en el lugar que corresponde, los navegadores web procesan el tamaño de las cajas. Cada caja se genera a partir de varios factores, entre ellos sus medidas, que pueden ser calculadas según el contenido o indicadas con las propiedades width y height.

El tamaño y la posición de las cajas también dependen del tipo de elemento HTML. Los elementos de bloque ocupan el ancho total permitido hasta encontrarse con los límites de su elemento padre. Esto significa que los elementos de bloque se distribuyen de arriba a abajo (verticalmente).

Los elementos de línea, en cambio, pueden colocarse uno al lado del otro (horizontalmente). En este caso, se puede especificar la dirección en la que se distribuyen —de izquierda a derecha o de derecha a izquierda— mediante la propiedad direction. Por defecto, van de izquierda a derecha.

Por ejemplo, las secciones (<div>) y los párrafos (<p>) son elementos de bloque, por lo que aparecerán uno por encima del otro, de forma consecutiva. Por su parte, los agrupadores (<span>) y los enlaces (<a>) son elementos de línea, por lo que aparecerán uno al lado del otro.

La tipología del elemento se puede cambiar con la propiedad display. Un elemento de bloque convertido a elemento de línea permitirá que otros elementos estén situados a su lado sin estar “flotando”.

Es importante mencionar que las cajas aparecen en el mismo orden en el que se encuentran los elementos HTML, es decir, siguiendo el flujo normal.

Posición flotante

La propiedad CSS float permite ubicar un elemento HTML al lado de otro elemento (izquierda o derecha), como si estuviera flotando. Esa propiedad cambia el flujo normal de los elementos que se encuentran en el mismo contenedor: la caja se posiciona moviendo el resto de cajas.

Los dos valores principales de float son left y right, para indicar si el elemento debe flotar a la izquierda o a la derecha, respectivamente. El valor por defecto o para deshacer la flotación es none. Si se quiere heredar el valor del elemento padre se usa el valor inherit.

Tabla de valores de la propiedad float:

Cuando se crea un elemento flotante, su caja se extrae del flujo normal del documento y se desplaza todo lo posible hacia un lado (izquierda o derecha). Esto significa que su borde exterior tocará el borde (de la izquierda o la derecha) de su elemento contenedor superior (padre).

Si hay una caja flotada hacia un lado, cuando flotamos otra caja en la misma dirección se detendrá cuando toque a la primera. Por tanto, los elementos flotantes no pueden ponerse los unos sobre los otros.

Resumiendo: los elementos pueden flotar a la izquierda (left), a la derecha (right) o no flotar (none). Vamos a ver algunos ejemplos.

Caja que flota a la izquierda

Se aplica con la propiedad float y el valor left.

Ejemplo de caja flotando a la izquierda:

.flota-izq {
  float: left;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Caja que flota a la derecha

Se aplica con la propiedad float y el valor right.

Ejemplo de caja flotando a la derecha:

.flota-izq {
  float: right;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Caja que no flota

Por defecto, las cajas de los elementos no flotan. Pero se puede anular un elemento flotante aplicando la propiedad float y el valor none.

Ejemplo de caja que no flota:

.flota-izq {
  float: none;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Limpiar elementos flotantes

Cuando se posiciona un elemento HTML con la propiedad float, el navegador web sitúa los elementos siguientes a su lado mientras haya sitio. Esto ocurre a pesar de no pertenecer al mismo bloque, y el resultado es que se verán elementos fuera de lugar, sin seguir el flujo normal.

Para evitar que esto ocurra, es necesario interrumpir la flotación del elemento en cuestión. CSS provee la propiedad clear que hace que un elemento no tenga otros elementos flotantes a su lado. Estos son sus valores:

Es habitual que después de crear elementos flotantes se introduzca un elemento HTML para limpiar la flotación. Se suele usar un elemento de bloque (como un <div>) al que se le indica la propiedad clear: both.

Código CSS:

.clear {
  clear: both;
}

Código HTML:

<div class="clear"></div>