Desarrollo de Software

¡Muerte a los floats!

Desde el comienzo de la web, se han ido mejorando las técnicas para poder maquetar nuestras webs y hacernos las cosas más fáciles y más semánticas para los robots de Google. La tendencia de hace unos años era maquetar con tablas pero ya vimos hace tiempo por qué maquetar con tablas no era buena idea. Y hasta ahora se estaba utilizando mucho la propiedad float de CSS para disponer elementos en la pantalla (en este momento yo mismo lo utilizo mucho en esta web, pero prometo corregirlo pronto) pero, como veremos más adelante, hay mejores formas de hacer esto.

Float Left/Right

Problemas al utilizar Float para maquetar

La propiedad float se debería utilizar sólo para utilizar en imágenes donde queramos poner un texto alrededor que envuelva la imagen. Sin embargo, lo hemos estado utilizando para disponer distintos elementos en la pantalla porque no teníamos otra opción mejor o por desconocimiento.

Pero utilizar float para maquetar layouts tiene varios problemas.

Problemas con la altura

Si tenemos elementos “flotantes” que tienen distintas alturas, pueden producirse ciertos efectos que penalizan la visualización de la web, quedando algunos elementos “atascados” con el anterior.

No se pueden centrar

Sólo tenemos las posibilidades de utilizar float left o float right. Cuando estamos maquetando podemos poner nuestros elementos para que ocupen toda la pantalla, pero actualmente hay muchos dispositivos desde donde podemos acceder a nuestra web y múltiples resoluciones, por lo que si está aumenta o disminuye, nos puede quedar un hueco a uno de los lados, cargándose un poco el aspecto visual de nuestra web.

Dependiente del marcado

Si utilizamos float left los elementos se van mostrando según estén indicados en el marcado HTML, pero si utilizamos float right, estos elementos se invierten produciendo, quizás, un efecto no deseado o teniendo que modificar nuestro HTML. Y esto no es bueno, deberíamos tener bien separados nuestro HTML de nuestro CSS y que el marcado no dependa de nuestra presentación.

Alternativas para crear el Layout de tu web

Tenemos un par de alternativas que nos ayudan a corregir los problemas anteriores y que añaden nuevas funcionalidades que nos permiten crear layouts más complejos.

Display Table

Para layouts sencillos, de 3 o 4 elementos podemos utilizar la propiedad display: table. Esta propiedad nos permite maquetar nuestro contenido como si fuera una tabla, pero sin modificar nuestro marcado HTML y dejándolo semántico.

El único problema es que con resoluciones pequeñas es un poco más complicado que quede todo el layout correctamente.

Flexbox

Para layouts más complejos, donde queramos disponer nuestros elementos donde queramos podemos utilizar el componente FlexBox, que nos permitirá realizar la maquetación de nuestra web a nuestro gusto y sin muchas complicaciones.

Tengo que hablar en un próximo artículo sobre las posibilidades que tenemos utilizando FlexBox.

Conclusiones

Como hemos visto, utilizar float para realizar la maquetación de nuestras webs puede llevar una serie de problemas que pueden resolverse con las dos alternativas anteriores. Además de que aumentan nuestras posibilidades de crear un layout mucho más complejo sin dificultad.

Por último, un vídeo resumen de lo que hemos visto hoy:

Un comentario en “¡Muerte a los floats!

  1. Excelente aporte, me ha servido mucho, además de corregir ese error de usar float para maquetar casi todo el contenido de las webs que desarrollo. Éxito en tus proyectos.

Pon un comentario

Tu dirección de email no será publicada.

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>