comparte el articulo 

Factores relevantes sobre el uso de floats en el layout

Actualizado el 05/05/2012 < > 0 Comentarios

Resumen: En este artículo explicamos los puntos más importantes a tener en consideración para lograr un uso correcto de la propiedad float al momento de aplicarse a los elementos que forman parte en nuestro layout.

Durante muchos años, el uso de la propiedad float para el posicionamiento de elementos dentro de un layout, ha representado uno de los mayores retos y dolores de cabeza para los diseñadores web que se han aventurado a utilizarla sin tener conocimiento exacto de su funcionamiento o correcta implementación.

Y no es para menos, puesto que float es uno de los conceptos menos aprehensibles por la intuición y cuando esta propiedad es utilizada generalmente obtenemos como resultado algo que no esperábamos.

Al utilizar elementos posicionados mediante float de manera incorrecta, estos pueden causar grandes problemas de visibilidad y usabilidad a nuestros sitios, rompiendo muchas veces con el layout disponible y haciendo que trabajemos el doble con tal de lograr un comportamiento más o menos deseable.

Es por ello muchos diseñadores prefieren llegar al extremo de evitar completamente su uso, omitiendo el hecho de que los layouts realizados mediante elementos flotantes son uno de los más adecuados a los estándares.

El problema no radica en la propiedad en si, lo hace en la forma en que ésta es interpretada por los desarrolladores, diseñadores y alguno que otro navegador. Por esta malinterpretación, su concepto es considerado algo tan escasamente intuitivo; sin embargo, si echamos un vistazo a su teoría y documentación veremos que no es algo realmente tan complejo como parece, ya que la mayoría de los problemas y bugs son producidos por versiones antiguas de navegadores, en su mayoría de Internet Explorer.

Puntos importantes sobre los elementos flotantes

  • Para encontrar la razón por la que se dio el nacimiento de la propiedad float en CSS, nos tendríamos que remontar mucho tiempo atrás en la historia del Internet, al punto donde los desarrolladores web buscaron obtener la habilidad para mostrar un texto alrededor de las imágenes que se desplegaban en los navegadores.

    Dicha práctica llego a ser implementada a partir de Netscape 1.1 y tiempo después fue añadida al nuevo lenguaje de estilo al cual se le dio el nombre de CSS.

  • El término “float” fue utilizado para describir la manera en que el elemento flota de un lado a otro, de arriba hacia abajo, al momento de poseer esta propiedad y sin necesidad de aplicar algo más que intervenga en su posición.

    Si bien su función se describe desde las primeras mejoras que se hicieron a la versión 2 del lenguaje HTML, fue hasta su implementación en CSS cuando empezó a tener un reconocimiento público y a la par de esto empezaron a surgir la mayoría de las malinterpretaciones de la propiedad.

  • Una capa o caja que reciba la propiedad float tendrá un comportamiento especial, distinto al del resto de los elementos que son posicionados con otros métodos, puesto que al principio el elemento que cuente con esta propiedad si se posiciona como parte del flujo normal, pero en cierto punto se saca del flujo y se desplaza hacia la izquierda o derecha de nuestra página retirándose lo más posible.

    Cuando un elemento es retirado del flujo normal, todo el contenido que se encuentra dentro de ese flujo tiende a ignorar a dicho elemento por completo y por lo tanto no hace espacio para que sea ocupado por éste.

  • Al momento de asignarle la propiedad float, el elemento se convierte en un bloque, en una caja la cual puede variar su posición oscilando de izquierda a derecha dependiendo del valor que reciba la propiedad. Las opciones en el marcado serían básicamente tres, “float: left”, “float right” o “float: none”, para dar un alineado a la izquierda, derecha o simplemente no dar la propiedad.
  • Tenemos que recordar siempre dar un ancho a los elementos que reciban la propiedad, este debe ser especificado mediante la propiedad width, ya que en caso de no contar con esta medida los resultados al momento de aplicar float pueden resultar poco predecibles. Esta regla se puede romper en caso de que apliquemos la propiedad a una imagen que ya tiene un ancho implícito, pero si un elemento float no tiene un ancho explícito o implícito en sus propiedades, ocupará todo su bloque contenedor de manera horizontal, imitando el comportamiento de los elementos no flotantes y no dejando la posibilidad de que el resto del contenido lo rodee.
  • A diferencia de las cajas en el flujo normal, los márgenes verticales de una caja flotante no se contraen con los márgenes de las cajas que se encuentran encima o debajo de ella. Además, una caja flotante puede superponer otras cajas a nivel de bloque adyacentes a ella en el flujo normal.
  • Un elemento flotante siempre ocupará un lugar al extremo izquierdo o derecho del elemento que lo contiene, no existe tal costa como un float centrado, algo que puede ser difícil de entender si vas empezando con el diseño web, pero fácil de recordar conforme avanzas en la práctica.
  • Cuando hacemos flotar un elemento este se coloca hasta el extremo borde de la dirección que indicamos, ya sea derecha o izquierda, si después de esto hacemos flotar otro elemento y lo mandamos a la misma dirección, este se va a desplazar hasta que alcance el borde del primer elemento flotante. Si seguimos flotando elemento en la misma dirección estos se irán acumulando hasta que no haya suficiente espacio, cuando esto ocurre se empezaran a desplazar hacia abajo del layout hasta que todos quepan.
  • Al momento de utilizar la propiedad tenemos que estar concientes de que la posición vertical del elemento será la que comúnmente ocuparía si estuviera dentro del flujo normal, mientras que la posición horizontal dependerá de la caja contenedora del elemento, si no esta dentro de ninguna otra capa o caja, entonces la ventana el cuerpo de nuestro documento será su límite.
  • Todas las cajas que sean creadas antes o después del elemento flotante, fluirán verticalmente de manera normal como si el elemento no existiera. Sin embargo, aquellas cajas que sean creadas al lado de la flotante serán acortadas con fin de dar espacio para que ésta se muestre.
  • Si queremos elaborar un layout utilizando únicamente elementos de tipo div con la propiedad “float: left”, estos se alinearán uno tras otro formando columnas. Si al final de este layout quisiéramos agregar un footer o una caja que abarque de manera completa la pantalla, basta con aplicar la propiedad “clear: both” a dicho elemento, de esa manera no importa el tamaño de las columnas que se crearon.

Publicado el 05/05/2012, última actualización 05/05/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras