Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

7. Posicionamiento (V)

7.5 Posicionamiento flotante.

La propiedad float

El posicionamiento flotante es distinto de los otros tipos de posicionamiento, y a la vez es el más utilizado. La mayoría de estructuras de las páginas web complejas están diseñadas con el posicionamiento flotante

El posicionamiento flotante no utiliza la propiedad position ni las propiedades de desplazamiento (left, top, right, bottom); para el posicionamiento flotante utilizaremos la propiedad float. Esta propiedad ya la hemos visto en el tratamiento de imágenes (en la página 5.2. Posición de la imagen.); sin embargo su utilidad principal es la de ser la base del posicionamiento flotante.

Recordemos que la propiedad float tiene tres posibles valores:

• float: left; Posiciona el elemento a la izquierda.
• float: right; Posiciona el elemento a la derecha.
• float: none; Anula el comportamiento de la propiedad, es el valor por defecto.

Cómo actua la propiedad float

Al aplicar la propiedad float a una caja, esta sale del flujo normal de la página, y se convierte en una caja flotante. Se sitúa lo más cerca posible del borde derecho o izquierdo de su elemento contenedor, (según tenga el valor left o right).

Las demás cajas en principio ignoran a la caja flotante. y ocupan el sitio dejado por ésta (por lo que puede haber solapamiento) tal como pasa con el posicionamiento absoluto. Sin embargo al contrario que en éste, los elementos que hay dentro de las cajas sí que respetan el espacio ocupado por la caja flotante, adaptándose al espacio visible que ésta deja. Veamos esto con unos ejemplos:

Tenemos la siguiente página con tres cajas: (pulsa en el enlace)

Página inicial.

El código CSS que afecta a estas tres cajas es el siguiente:

#caja1 { width: 250px; height: 250px; background-color: yellow; margin: 30px;}
#caja2 { width: 700px; background-color: lime; margin: 10px;  }
#caja3 { width: 700px; background-color: aqua; margin: 10px;  }

ahora aplicamos la propiedad float: left a la primera caja. el resultado es el siguiente:

Propiedad float

Tal como indicabamos al posicionar la primera caja de forma flotante, las otras cajas ocupan el lugar de ésta, sin embargo el texto y los elementos incluidos dentro de ellas se posicionan dentro del espacio visible de la caja, respetando el espacio ocupado por la caja flotante.

Varias cajas flotantes

Cuando en una página o contenedor hay varias cajas flotantes, cada una de ellas tiene en cuenta el sitio de las otras, respetando su espacio, y tenderán a posicionarse lo mas a la izquierda o a la derecha posible (según se aplique el valor left o right) y lo más arriba posible. Por lo tanto, siempre que tengan sitio dentro de la página o de su contenedor, se posicionarán en la misma línea, si la caja fuera más ancha que el sitio disponible, pasará a ocupar un lugar inferior. Veamos el siguiente ejemplo:

Propiedad float en varias cajas

Veamos cual es el comportamiento de las cajas de este ejemplo:

Esta es la imagen de la página de ejemplo:

• La caja 1: "float: left"; se coloca a la izquierda y lo más arriba posible.
• La caja 2: "float: left"; se coloca a la izquierda a continuación de la caja 1, ya que está lo mas alto posible y a la izquierda, despues de respetar el sitio de la caja anterior, que está escrita antes en el código HTML.
• La caja 3: "float: right"; Al tener el espacio superior derecho libre y ser éste más grande que la caja se coloca ahi.
• La caja 4: "float: left"; al no caber en el espacio dejado por las cajas anteriores, ocupa un espacio inferior a estas, y a la izquierda.
• La caja 5: "float: right"; Se posiciona en la misma línea que la caja 4 pero a la derecha.
• La caja 6: "float: right"; Al tener espacio en la misma línea que la caja 5, se posiciona en esta línea, lo más a la derecha, respetando la caja 5.
• La caja 7: "float left"; se posiciona en primer lugar lo más arriba posible, y después a la derecha, con lo que queda a la derecha de la caja 4 pero una línea por debajo de las otras cajas, al ser la caja 4 más alta que las otras, y estar a su izquierda.

Por lo tanto observamos que en el posicionamiento flotante, al contrario que en los otros tipos de posicionamiento, es fundamental el orden en que aparecen escritos los elementos en el codigo HTML, ya que de ello depende si una caja se posiciona antes o después que otra.

Las cajas se posicionan en el mismo orden en que aparecen en el código, teniendo en cuenta las siguientes reglas:

• La caja respeta siempre el sitio ocupado por las cajas anteriores
• Se colocará en primer lugar lo más arriba posible (parte superior),
• Se colocará después lo más a la izquierda o derecha posible (dependiendo del valor de la propiedad float).

Cajas flotantes y cajas normales

Como se dijo anteriormente, las cajas no flotantes se sitúan ignorando el espacio ocupado por éstas y en un segundo plano de la imagen. Sus elementos se colocan en el sitio visible que deja la caja flotante, respetando el sitio que ésta ocupa.

Este comportamiento puede variarse mediante la propiedad clear, la cual aplicada a la caja normal, la posiciona debajo de la caja flotante.

La definición de la propiedad clear es la siguiente:

A continuación se explica el significado de los valores de esta propiedad:

• none: Es el valor por defecto, la caja se posiciona de la misma forma que si no tuviera aplicada la propiedad.
• left: La caja se posiciona por debajo de las cajas flotantes posicionadas a la izquierda (con la propiedad: float: left).
• right: La caja se posiciona por debajo de las cajas flotantes posicionadas a la derecha (con la propiedad: float: right).
• both: La caja se posiciona por debajo de cualquier caja flotante.

A continuación se muestra una página de ejemplo con varia cajas flotantes y varias normales que utilizan la propiedad clear.

Propiedad clear

Las propiedades float y clear son la base para el diseño de páginas más complejas, como se verá más adelante.

En la siguiente página veremos otras propiedades que permiten visualizar las cajas de diferentes maneras.

Visualización

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com