Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 22-08-2017.

Visitas este mes: 135

Visitas el mes pasado: 160

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




7. Posicionamiento (V)

7.5 Posicionamiento flotante.

css

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:


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:

flotante1

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:


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:

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:

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



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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