Curso WEBCSS. Curso Web accesible con XHTML y CSS. Bloque I. XHTML 1. Introducción

5. Propiedades float y clear

Se puede especificar que los elementos queden flotando a la izquierda o a la derecha de los que le rodean. Esto se consigue con la propiedad float.

El efecto de esta propiedad es bastante simple pero resulta muy útil para que el diseño de la página se adapte al monitor del usuario. Lo que hace la propiedad es quitar al elemento del flujo normal de la página y colocarlo a la izquierda o derecha del resto del contenido de su elemento padre (se lo hace "flotar" hacia uno u otro costado).

La propiedad clear es complementaria a la anterior. Con clear se especifica que un elemento no admite un flotante sobre su izquierda, sobre su derecha o a ambos lados. También se la puede usar en un elemento flotante para impedir que otros flotantes puedan quedar sobre algunos de sus costados.

Propiedad float.

Sintaxis: float: <valor>

Valores posibles: none | left | right | both | inherit

Valor inicial: none

Se aplica a: Todos los elementos menos los posicionados y los contenidos generados

Heredado: No

Sintaxis:	float: <valor>
Valores posibles:	none \| left \| right \| both \| inherit
Valor inicial:	none
Se aplica a:	Todos los elementos menos los posicionados y los contenidos generados
Heredado:	No

Los valores de esta propiedad tienen los siguientes significados:

left: El elemento genera una caja de bloque que flota a la izquierda. El contenido fluye sobre el costado derecho de la caja, comenzando en la parte superior.
right: Igual que 'left', pero el contenido fluye sobre el costado izquierdo de la caja, comenzando en la parte superior.
none: La caja no es flotante.

Propiedad clear.

Sintaxis: float: <valor>

Valores posibles: none | left | right | both | inherit

Valor inicial: none

Se aplica a: Los elementos a nivel de bloque

Heredado: No

Sintaxis:	float: <valor>
Valores posibles:	none \| left \| right \| both \| inherit
Valor inicial:	none
Se aplica a:	Los elementos a nivel de bloque
Heredado:	No

Los valores tienen los siguientes significados:

left: El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuente.
right: El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuente.
both: La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuente.
none: No existe ninguna restricción a la posición de la caja con respecto a los flotantes.