Posicionamiento
flotantePosicionamiento
flotanteEn esta página se tratan los siguientes temas:
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.
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. |
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 { } |
|
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; } |
|
| |
img { float: right; } |
|
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.
|
|
| |
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.
|
|
| |
Las dos imágenes están insertadas al final del texto:
<p>Texto<img izquierda /><img derecha /></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.
|
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.
|
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.
|
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; } |
|
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 |
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 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 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 y el anterior forman parte de una división. Además hay un 3º párrafo vacío con la propiedad clear. |