# Posicionamiento flotante

En esta página se tratan los siguientes temas:

## 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 principio de la página

## 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 {
      background-color: pink;
      color: red;
      float: left;
      font-family: monospace;
      font-size: 400%;
    }
| 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 hay que hacer la letra flotante y aumentar su tamaño. En este caso se ha cambiado también el color y el tipo de letra para resaltar el espacio ocupado por la primera letra.

Nota: Firefox no muestra este ejemplo igual que Internet Explorer y Chrome. La primera letra se ve más pequeña.

Volver al principio de la página

## 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 izquierda /><img derecha />Texto</p>
| GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres. |
| La imagen izquierda está situada antes del texto y la imagen derecha al final del texto:
    <p><img izquierda />Texto<img derecha /></p>
| GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres. |
| Las dos imágenes están insertadas al final del texto:
    <p>Texto<img izquierda /><img derecha /></p>
| GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres. |

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. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres. |
| Las dos imágenes están insertadas antes del texto:
    <p><img derecha /><img izquierda />Texto</p>
| GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres. |

Volver al principio de la página

### 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 mientras haya sitio, aunque no pertenezcan al mismo bloque, como muestra el siguiente ejemplo:

    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, que hace que no hayan elementos flotantes a la izquierda,
- right, que hace que no hayan elementos flotantes a la derecha,
- both, que hace que no hayan elementos flotantes ni a derecha ni a izquierda,
- none, que permite que hayan elementos flotantes a derecha y a izquierda (valor por omisión).

Se puede asignar la propiedad clear a cualquier elemento. En el ejemplo siguiente se ha asignado a una línea horizontal, de manera que la línea ya no flota a la derecha de la imagen, sino que se muestra a continuación de la imagen:

    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 principio de la página

### 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 class="centrado">
      <img
        alt="Logotipo de GNU (GNU is Not Unix)"
        src="../img/gnu-head-sm.jpg"
        title="Logotipo de GNU (GNU is Not Unix)"
      />
    </p>
    p.centrado {
      text-align: center;
    }

Volver al principio de la página

## 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 {
     border: black 2px solid;
     float: left;
     height: 100px;
     margin: 3px;
     padding: 3px;
     width: 100px;
    }
| 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 principio de la página

## 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:

    div {
      border: black 3px solid;
    }

    img {
      float: left;
    }
| Este párrafo tiene insertada una imagen flotante. Este párrafo y el anterior forman parte de una división. Este párrafo ya está fuera de la división.

Si se quiere que la división incluya la imagen, se puede conseguir de varias maneras:

- Una primera solución podría ser dar la propiedad clear: both al segundo párrafo.

      div {
        border: black 3px solid;
      }

      p.limpia {
        clear: both;
      }

      img {
        float: left;
      }
  | 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 clase "limpia" y por tanto la propiedad clear. Este párrafo ya está fuera de la división.

- Una segunda solución podría ser insertar un tercer párrafo vacío con la propiedad clear: both (y no ponersela al segundo párrafo). En la primera solución, el segundo párrafo ya no fluye a la derecha de la imagen, mientras que en la segunda sí lo hace.

      div {
        border: black 3px solid;
      }

      p.limpia {
        clear: both;
      }

      img {
        float: left;
      }
  | Este párrafo tiene insertada una imagen flotante. Este párrafo y el anterior forman parte de una división. Además a continuación de este párrafo hay un tercer párrafo vacío con la clase "limpia" y por tanto con la propiedad clear. Este párrafo ya está fuera de la división.

- Una tercera solución sería dar una altura mínima a la división mayor con la propiedad min-height. La altura debe ser mayor que la altura de la imagen.

      div {
        border: black 3px solid;
        min-height: 160px;
      }

      img {
        float: left;
      }
  | Este párrafo tiene insertada una imagen flotante. Este párrafo y el anterior forman parte de una división. La división tiene una altura mínima. Este párrafo ya está fuera de la división.

- Una cuarta solución sería dar una altura muy pequeña a la división y establecer la propiedad: overflow: hidden.

      div {
        border: black 3px solid;
        height: 1%;
        overflow: hidden;
      }

      img {
        float: left;
      }
  | Este párrafo tiene insertada una imagen flotante. Este párrafo y el anterior forman parte de una división. La división tiene una altura mínima y la propiedad overflow: hidden. Este párrafo ya está fuera de la división.

  Nota: En Firefox y en Internet Explorer se podría utilizar también la propiedad overflow: auto, pero en Google Chrome esta solución no funciona. Debería añadir ese ejemplo para que fuera fácil comprobar si sigue siendo así en versiones posteriores de Chrome.

Volver al principio de la página

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.