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.
Volver al principio de la página
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 tienes 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. |
Volver al principio de la página
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. 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
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.
|
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:
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.
|
Volver al principio de la página
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
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;
|
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
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 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:
| |
div {
border: black 3px solid;
}
|
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. |
| |
div {
border: black 3px solid;
}
|
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. |
| |
div {
border: black 3px solid;
min-height: 160px;
}
|
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. |
| |
div {
border: black 3px solid;
height: 1%;
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.
Volver al principio de la página
Autor: Bartolomé Sintes Marco