La Propiedad Float en CSS

En la definición de la estructura de una página web se utilizan elementos que, manejados adecuadamente, son las variables que nos permitirán dar una imagen profesional a nuestro sitio. Las tablas fueron uno de los medios usados para la maquetación web en sectores rectangulares, los cuales permitían ubicar los objetos en un orden más o menos controlado.

Sin embargo, el uso de tablas dentro del HTML fue reemplazado, a partir de la creación de una propiedad CSS que permite más flexibilidad y precisión: la propiedad float.

Desde entonces, las tablas se utilizan sólo para su función básica: la tabulación de cifras o datos.

Una vez que se conocen las características de la propiedad float en CSS, la diagramación de un sitio web y sus actualizaciones posteriores se realizan con mayor elasticidad y eficiencia.

La Función de Float

La propiedad float permite la distribución en columnas de los elementos de bloque de la página. Llamamos elementos de bloque a todos aquellos que generan un área rectangular en el sitio que ocupan rompiendo el flujo normal del texto, como div, p, ul.

La propiedad float en CSS permite desplazar un elemento de bloque a la izquierda o a la derecha. Esto produce un cambio en la progresión normal, por la cual los elementos se ubican según su orden secuencial en la página. Una de las características de la propiedad float es que los objetos que no configuran bloques, como el texto, rodean al objeto “flotante”. Esto es particularmente visible en las páginas que contienen ilustraciones en medio de un párrafo de texto, a modo de revista.

El formato de la función float es así:

.derecha {float: right;} o .izquierda {float: left;}

Donde los parámetros posibles son right, left, none o inherit.

right: el elemento es empujado (“flota”) hacia la derecha.

left: el elemento se desplaza hacia la izquierda.

none: el objeto seguirá la secuencia normal de la página.

inherit: la propiedad float de este elemento depende de un objeto padre (un elemento de nivel superior que lo contiene).

Relación de Float con Los Elementos

La propiedad float sólo se aplica a elementos que formen bloques o módulos. Estos son: imágenes, párrafos, divisiones y listas. O sea, los objetos que determinan una zona rectangular sobre la página. Tabién se puede aplicar la propiedad folat a un elemento de línea (a, span), al que se le ha dado display:block, que cambia su valor en línea a bloque.

Dentro de la codificación HTML se identifican de la siguiente manera:

Imágenes: <img src= …… [localización de archivo y parámetros]………………..>

Párrafos: <p> ….. [texto] ….. </p>

Divisiones: <div> ….. [parámetros] ….. </div>

Listas: <ul> ….. [elementos de la lista] ….. </ul>

Los elementos que no forman bloques, como el texto, por ejemplo, rodean al objeto flotante sobre el espacio opuesto a él. Es decir, si el objeto tiene la propiedad float: left, el texto lo rodeará ocupando todo el espacio posible a la derecha, sin invadir su posición. En cuanto a otros objetos de bloque, se ubicarán ignorando la posición del elemento flotante.

Los objetos con la propiedad float deben definirse además con la propiedad width (ancho) para asegurar las dimensiones de la columna y evitar conflictos de ubicación y espacio. Una de las propiedades que se utiliza en conjunto con float para mejorar la organización de los elementos, es clear. Clear se aplica a un objeto para evitar que se coloquen elementos flotantes a sus lados. Los parámetros de clear son left (no permite objetos a su izquierda), right (no los permite a la derecha) y both (impide elementos flotantes a ambos lados).

Aplicaciones Prácticas de Float

Queda más o menos clara la función de esta propiedad, en cuanto a fijar un bloque sobre uno de los lados y permitir el flujo de otra información a su alrededor. Con la práctica se pueden lograr efectos muy creativos mediante el uso de float, clear, la definición de anchos de columnas y la intervención de otros elementos, flotantes o no. En particular, los casos que se esbozan a continuación reflejan algunos de esos usos prácticos.

Menú horizontal: mediante la incorporación de varios rectángulos (imágenes) en forma secuencial y con propiedad float: left, dentro de una lista desordenada, <ul>, logramos su ubicación horizontal en línea. El primer rectángulo se ubicará sobre el margen izquierdo, el segundo sobre el primer objeto, y así hasta completar todos los rectángulos. Estas imágenes pueden llevar una leyenda y ser enlazadas con las páginas que correspondan, lo cual configura un menú horizontal.

Catálogo de productos: tal como en el caso anterior, la inclusión de fotografías de productos con sus descripciones dentro de una lista desordenada, permite su exhibición horizontal en una o varias líneas, si se utiliza la propiedad float para cada objeto. Es un método más eficiente que el uso de tablas, ya que el sencillo reemplazo de una de las imágenes reorganizaría el resto sin necesidad de ninguna tarea adicional.