Posicionamiento
Propiedades de posición
Definiendo las propiedades de posición de un elemento podremos sacar a este de su flujo normal, y determinar la posición que ocupará.
También podemos definir de que modo este elemento influirá en el resto de elementos que le rodean, si se ven afectados por el espacio que este ocupa, o si simplemente le ignoran.
En posición absoluta un elemento no influirá sobre la posición de los que le rodean.
En posición relativa, los elementos que le rodean se verán afectados por el espacio que ocupa el elemento.
En posición fija (fixed), los elementos que le rodean no se verán afectados, y el elemento fuera de flujo ocupará siempre la misma posición respecto a la ventana del documento.
La posición por defecto de los elementos de una web siempre es estática. En posición estática los elementos circundantes se verán afectados, ya que el elemento estático mantiene su flujo normal.
La propiedad "float"
Cuando asignamos a un selector la propiedad “float”, estamos sacando al elemento o fragmento de xhtml correspondiente de su flujo normal para alinearlo a la derecha o izquierda según hayamos definido en las reglas su selector.
El contenido del elemento siguiente se verá afectado por el elemento float como si fuese un medio líquido en el que sumergimos a este elemento, de modo que si al elemento float le damos alineación izquierda, se verá rodeado en su parte inferior y derecha por el contenido del siguiente elemento, y si le damos alineación derecha, el contenido del siguiente elemento se le situará entorno a su lado izquierdo e inferior.
La aplicación más típica de esto es para integrar una imagen o recuadro de datos en el interior de un bloque de texto, tal como se muestra en estos mismos párrafos respecto a la imagen de la izquierda, o en el ejemplo que muestra la propia imagen.
Si estrechamos progresivamente la ventana del navegador, podremos observar el comportamiento líquido del bloque de texto que envuelve la esquina inferior derecha de la imagen.
La propiedad "clear"
También podemos necesitar que el contenido del siguiente elemento no se comporte como liquido rodeando al elemento float, si no que se situé únicamente debajo de este, en una línea inferior. Para hacer esto debemos recurrir a la propiedad clear del elemento que sigue al flotante.
Dado que la imagen es flotante a la izquierda, este texto se sitúa a su derecha, siempre que la ventana del documento tenga el espacio suficiente. Pero los siguientes párrafos también intentarán colocarse aquí tengan o no relación con este tema.
Es evidente que necesitamos que el párrafo “Aplicaciones de Float” se sitúe a partir de la base de la imagen, no a su derecha. Este es el ejemplo más típico de la utilidad de la propiedad “clear”. Se aprecia mejor maximizando la ventana del navegador.
Aplicaciones de "float"
Otra de las aplicaciones de “float” es en la creación de una barra de navegación horizontal, o una sección migas, muy utilizadas para hacer una web más usable y accesible orientando en todo momento al usuario sobre el punto donde se encuentra. Por supuesto tampoco es el único modo de hacer esto, pero funciona bien y sirve para entender un poco mejor el comportamiento de la propiedad float.
Imaginar que tenemos el clásico menú de navegación formado por una serie de enlaces dentro de una lista “ul”, y por diferentes razones necesitamos que ese menú de navegación pase a ser una barra horizontal con los mismos enlaces.
En realidad solo tenemos que cambiar una regla, pero debemos tener claro en que selector se debe hacer.
Si hacemos flotantes sus elementos de lista “li”, y por ejemplo les damos alineación izquierda, el resultado será que todos los enlaces se posicionarán en la misma línea uno al lado de otro hasta completar el ancho de esta.
Por lo tanto el selector sobre el que tenemos que actuar será el elemento de lista “li” dentro del contexto de lista “ul” correspondiente, y hacerlo flotar a la izquierda.
Por ejemplo podría ser algo como:
ul.navegv li { flotar izquierda; }
Con lo que accederíamos al selector “li” en el contexto de una lista “ul” de clase “.navegv”.
Recordar que el nombre de la clase (.navegv) es orientativo, pero debéis acostumbraros a dar nombres con cierto significado a las clases, por ejemplo “.navegv”, viene bien para nombrar una clase destinada a los menús de navegación verticales, lo mismo que “navegh” para los horizontales.
Otra de las aplicaciones de float es para posicionar algunos contenedores principales de la web. Suele emplearse para columnas o cuadros que flotarán a derecha o izquierda del contenido central de la página.