# Posicionamiento flotante

## Posicionamiento flotante: float y clear

La propiedad float establece el esquema de posicionamiento flotante para un elemento. Cuando existe un elemento flotante, los elementos que se encuentran a continuación del elemento flotante fluyen a lo largo de él, salvo que haya un elemento que tenga establecido la propiedad clear.

Las propiedades float y clear se pueden aplicar a cualquier elemento de una página web.

Volver al índice

## Posicionamiento flotante de caracteres: letra capital

Se puede crear una letra capital aplicando la propiedad float a la primera letra de un párrafo. En el ejemplo siguiente se utiliza la pseudo-clase :first-letter, por lo que no hace falta aplicar la propiedad clear.

| p:first-letter { float: left; font-size: 300%; font-family: monospace; color: red; } | La primera letra de este párrafo es una letra capital, es decir, una letra más grande que ocupa varias líneas de texto. Para ello, en la hoja de estilo tienes que hacer la letra flotante y aumentar su tamaño. En este caso también he cambiado el color y el tipo de letra.

Volver al índice

## Posicionamiento flotante de imágenes

### La propiedad float

Las imágenes son elementos en línea, es decir, que se insertan como si fueran caracteres, formando parte del párrafo o del elemento de bloque en el que se insertan. La altura de la línea en la que está insertado el elemento aumenta lo necesario para poder alojar la imagen, como muestra el siguiente ejemplo, en el que la hoja de estilo no contiene ninguna propiedad relacionada con la imagen.

| img { } | Este párrafo tiene insertada una imagen al principio del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo recursivo que significa "GNU is Not Unix" (GNU No es Unix). GNU es un proyecto de software libre iniciado por Richard Stallman en 1984. La imagen forma parte del párrafo, es una letra más en la primera línea.

Si se quiere que una imagen aparezca a la izquierda (o a la derecha) de un texto, es decir, que el texto fluya a lo largo de la imagen, hay que utilizar la propiedad float. Esta propiedad sólo admite dos valores, left y right, que sitúan la imagen a la izquierda o a la derecha, como muestran los ejemplos siguientes.

| img { float: left; } | Este párrafo tiene insertada una imagen al principio del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo recursivo que significa "GNU is Not Unix" (GNU No es Unix). GNU es un proyecto de software libre iniciado por Richard Stallman en 1984. La imagen debe "flotar" a la izquierda y el texto debe fluir a su derecha.
| img { float: right; } | Este párrafo tiene insertada una imagen al principio del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo recursivo que significa "GNU is Not Unix" (GNU No es Unix). GNU es un proyecto de software libre iniciado por Richard Stallman en 1984. La imagen debe "flotar" a la derecha y el texto debe fluir a su izquierda.

Para que las imágenes salgan correctamente alineadas con el texto, la imagen debe insertarse al principio del texto, independientemente de la posición final que vaya a tener la imagen. Los siguientes ejemplos muestran las diferencias

| Las dos imágenes están insertadas antes del texto: <p><img /><img />Texto</p> | GNU + Linux = GNU/Linux. |
| La imagen izquierda está situada antes del texto y la imagen derecha al final del texto: <p><img />Texto<img /></p> | GNU + Linux = GNU/Linux. |
| Las dos imágenes están insertadas al final del texto: <p>Texto<img /><img /></p> | GNU + Linux = GNU/Linux. |

Si las dos imágenes están situadas antes del texto, el orden de inserción no es importante

| Las dos imágenes están insertadas antes del texto: <p><img izquierda /><img derecha />Texto</p> | GNU + Linux = GNU/Linux. |
| Las dos imágenes están insertadas antes del texto: <p><img derecha /><img izquierda />Texto</p> | GNU + Linux = GNU/Linux. |

Volver al índice

### La propiedad clear

Al crear una imagen flotante, el navegador sitúa los elementos que se encuentran a continuación de la imagen a su lado, aunque no pertenezcan al mismo bloque, como muestra el siguiente ejemplo (en Amaya los párrafos no se montan, pero sí en Firefox e Internet Explorer):

| img { float: left; } | El logotipo de GNU debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. El logotipo de Linux, Tux, debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. Seguramente tanto la imagen como el párrafo están a la derecha del logotipo de GNU. |

Para impedir que ocurra esto, es necesario que la flotación de la imagen se interrumpa. La propiedad clear hace que un elemento no tenga elementos flotantes a su lado. Los posibles valores de clear son left, right y both, que harían que no hubiera elementos flotantes a la izquierda, a la derecha o en ninguno de los dos lados, respectivamente.

Se puede asignar la propiedad clear a cualquier elemento. En el ejemplo siguiente se ha asignado a una línea horizontal:

| img { float: left; } hr { clear: both; } | El logotipo de GNU debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. El logotipo de Linux, Tux, debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. La línea intermedia impide que se monten sobre el párrafo anterior. |

Volver al índice

### Centrar una imagen

La propiedad float no permite centrar objetos. Para centrar una imagen, el elemento que contiene a la imagen tiene que tener su contenido centrado.

Por ejemplo, si la imagen está en un párrafo, se puede definir la clase "p.centrado" con el atributo text-align establecido con el valor center y después dar al párrafo que contiene la imagen la clase "centrado". Lógicamente, si se añade texto al párrafo, el texto también se centrará.

| p.centrado { text-align: center; } |

Volver al índice

## Posicionamiento flotante de otros elementos

La propiedad float se puede aplicar a cualquier elemento. En el ejemplo siguiente se ha aplicado la propiedad float a los párrafos (para que los párrafos floten uno al lado del otro en vez de ocupar de lado a lado, es necesario asignarles tamaño con las propiedades width y height).

| p { float: left; width: 100px; height: 100px; border: black 2px solid; margin: 3px; padding: 3px; } | Esto es un párrafo Esto es un párrafo Esto es un párrafo Esto es un párrafo Esto es un párrafo Esto es un párrafo

Volver al índice

## Tamaño de los elementos que contienen elementos flotantes

Los elementos flotantes no se tienen en cuenta al calcular el tamaño de los elementos que los contienen. Por ejemplo, si un imagen flotante forma parte de una división con borde, la imagen puede "salirse" del borde, como se ve en siguiente ejemplo:

| img { float: left; } div { border: black 3px solid; } | Este párrafo tiene insertada una imagen flotante. Este párrafo y el anterior forman parte de una división.

En el ejemplo anterior, si se quiere que el borde de la división incluya la imagen, se puede dar la propiedad clear: both al segundo párrafo.

| img { float: left; } div { border: black 3px solid; } p.limpia { clear: both; } | Este párrafo tiene insertada una imagen flotante. Este párrafo y el anterior forman parte de una división. Este párrafo tiene la propiedad clear.

En el ejemplo anterior, el segundo párrafo ya no fluye a la derecha de la imagen. Si se quiere que el segundo párrafo fluya a la derecha de la imagen, lo que se podría hacer es insertar un tercer párrafo vacío con la propiedad clear: both (y no ponersela al segundo párrafo).

| img { float: left; } div { border: black 3px solid; } p.limpia { clear: both; } | Este párrafo tiene insertada una imagen flotante. Este párrafo y el anterior forman parte de una división. Además hay un 3º párrafo vacío con la propiedad clear.

Volver al índice