| NOTA : Algunas definiciones son extraidas tal cual o simplificadas de la Recomendación de W3C sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1), que está en la Sección HTML/CSS de esta web. |
| Antes de hacer un ejercicio de creación de un menú horizontal, voy a explicar la propiedad Float, que necesitaremos utilizar. |
| |
 FLOAT left, right, none
|
Especifica si una caja debe ‘flotar’ a la izquierda, a la derecha, o no flotar. Que una caja ‘flote’ quiere decir que la caja se desplaza al lado que se indique en la propiedad, dejando el sitio restante libre para que se pueda ocupar por otras cajas, dependiendo de la propiedad CLEAR que explico más abajo.
Para que una caja o bloque se considere flotante, debe definir expresamente su anchura, como es lógico, para poder limitar su espacio y asignar el resto al posible contenido posterior. |
|
 left: |
|
El bloque se situará a la izquierda de los elementos adyacentes. |
|
right: |
|
El bloque se situará a la derecha de los elementos adyacentes. |
|
none: |
|
El bloque no es flotante. |
| |
|
| El código siguiente muestra 2 bloques DIV que no son flotantes. Por su naturaleza de elementos de tipo bloque, los posicionará uno debajo del otro. |
 |
| El EJEMPLO muestra el resultado. |
| Este nuevo código ahora posiciona la caja negra a la izquierda. |
 |
| El EJEMPLO muestra el nuevo resultado. |
| Prueba tu cambiando el float a la derecha. |
| |
| |
CLEAR left, right, both, none |
| Esta propiedad indica cual de los lados de la caja de un elemento no puede quedar adyacente a una caja flotante anterior. Esto implica que la propiedad Clear la especificamos sobre el siguiente elemento después de un elemento con Float. |
|
left: |
|
El elemento en cuestión NO permite elementos flotantes a la izquierda. |
|
right: |
|
El elemento en cuestión NO permite elementos flotantes a la derecha. |
|
both: |
|
El elemento en cuestión NO permite elementos flotantes a ningún lado. |
|
none: |
|
El elemento en cuestión permite elementos flotantes a ambos lados. |
| |
|
| Si al código del ejemplo anterior le añadimos un clear:left a la caja2, la caja1 flotará a la izquierda, pero a su derecha no se colocará la caja2 porque la propiedad Clear así lo especifica (dice que no colocará ningún bloque flotante a su izquierda). |
 |
| El EJEMPLO muestra cómo actúa Clear. |
| Y hasta aquí este brevísimo tutorial. Estas dos propiedades, que a simple vista pueden no parecer muy útiles, son imprescindibles en determinadas ocasiones. Un ejemplo de su uso es en la creación de menús horizontales, como vamos a ver en el tutorial siguiente. |
| |
Español
English
