CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 76
Visitas el mes pasado: 200
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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.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)
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:
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.
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:
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:
float
).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:
clear | Despejar los elementos flotantes adyacentes |
---|---|
Valores | none | left | right | both | inherit |
Descripción | Indica el lado del elemento que no debe ser adyacente a ninguna caja flotante |
Valor inicial | none |
se aplica a | Todos los elementos de bloque |
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
.
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.
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