Propiedades Float y Clear en CSS

Autor: Antonio García

Cuando estamos diseñando una página web, existen dos propiedades que nos pueden ayudar enormemente a lograr todas las formas y distribuciones de elementos deseadas, estas son las propiedades float y clear.

Ambas propiedades suelen utilizarse juntas, a continuación vamos a describir paso a paso con ejemplos su forma de funcionamiento.

Float es una propiedad de CSS gracias a la cual podemos, como su nombre lo indica, "hacer flotar" un elemento a alguna posición relativa, rompiendo de esta manera el esquema o flujo normal de la página.

Los tres valores que acepta la propiedad float son los siguientes:

  • Left: Flota el elemento a la izquierda
  • Right: Flota el elemento a la derecha
  • None: No flota el elemento a ninguna posición, es el valor que viene por defecto.

Vamos a empezar por definir 4 contenedores, uno enseguida del otro, y sin usar la propiedad float, lo cual se vería así:




Como se observa en el código anterior, se aplica una clase a los contenedores, simplemente para especificar un tamaño, color y borde. El resultado se observa en la siguiente figura:



En la figura anterior se observan los 4 contenedores creados. Al no aplicarles la propiedad float, simplemente se colocan uno debajo del otro, siguiendo el flujo normal de la página.

A continuación vamos a agregar la propiedad float con el valor de left a los contenedores, esto lo especificamos también en la clase, quedando de la siguiente forma:




Y se visualizaría así:



Como se observa en la figura anterior, el primer contenedor flota o se posiciona a la izquierda, y luego los otros contenedores intentan hacer lo mismo, quedando de esta manera a un lado de manera ordenada.

Veamos que pasa si ahora a la propiedad float le asignamos el valor de right:




Lo que se visualizaría así:



Como se observa, los contenedores ahora cambiaron de sentido, el primer contenedor flota o se posiciona a la derecha y los demás intentan hacer lo mismo, quedando en el orden mostrado en la figura anterior.

Por medio es estos ejemplos nos podemos dar cuenta que usando la propiedad float podemos lograr diseños de columnas para nuestras páginas.

Al momento de estar utilizando objetos con la propiedad float, puede presentarse un problema: cuando el tamaño de la pantalla es menor al que ocupan los objetos, los que no quepan se irán acomodando hacia abajo, lo cual se visualizaría de la siguiente manera:




En las imágenes anteriores se observa que aunque todos los contenedores tienen definida su propiedad float con el valor left, el contenedor 4 intenta colocarse a un lado del contenedor 3 (como ya se había explicado anteriormente) pero no cabe y por lo tanto se posiciona abajo.

Si es se desea, para efectos de diseño de la página, que los 4 objetos aparezcan juntos, este problema se puede solucionar encerrando todos los contenedores dentro de otro que tenga un tamaño igual o mayor al que ocupan todos los contenedores:




Y los contenedores quedarían distribuidos de la siguiente manera:




Como se observa en la figura anterior, al encerrar todos los contenedores dentro de otro, éstos siguen respetando su propiedad float y se colocan uno enseguida del otro, aunque no alcancen a ser visualizados en la pantalla, simplemente se activa un scrollbar horizontal para poder desplazarnos y visualizar todos los elementos.

Clear es la propiedad que sirve para romper el esquema que estaba formando float. Como se observó en los ejemplos del uso de la propiedad float, cada elemento que la tuviera activada, se iba colocando a un lado del otro. Si se le coloca la propiedad clear a un objeto se le dice que actúe como si fuera el primer objeto en tener la propiedad float, pero en la siguiente línea, y así el esquema de posicionamiento anterior se rompe y comienza uno nuevo de ahí para abajo. La propiedad clear acepta los siguientes valores:

  • Left: Se rompe el esquema de orden para los elementos con float:left
  • Right: Se rompe el esquema de orden para los elementos con float:right
  • Both: Se rompe el esquema de orden para los elementos con cualquier valor de float

A continuación presentamos un ejemplo de lo descrito anteriormente:




En la imagen anterior se observa que ahora hemos definido una nueva clase llamada caja2, en la cual utilizamos la propiedad clear y le asignamos el valor de left. Como ya habíamos visto, con esto le queremos decir que rompa el esquema de ordenación para los elementos que utilizan la propiedad float:left. Después de utilizar la propiedad clear:left, asignamos la propiedad float:left para esa clase, es decir, los elementos que la utilicen comenzarán un nuevo esquema de posicionamiento pero ya en una línea inferior.

A continuación volvemos a presentar el ejemplo con los 4 cotenedores, los 2 primeros utilizan la clase caja 1, la cual tiene activada la propiedad float:left, por lo que el contenedor 1 se colocará hasta la izquierda de la página y enseguida de él se colocará el contenedor 2, quién intenta hacer lo mismo.




Pero podemos observar que el tercer contenedor utiliza la clase caja 2, la cuál utiliza la propiedad clear:left, al hacer esto le estamos indicando que rompa el esquema de posicionamiento de float:left que se venía utilizando y que comience uno nuevo, en una nueva línea. El contenedor 4 al utilizar la clase caja 1, intentará colocarse hasta la izquierda, pero del nuevo esquema creado, es decir, a un lado del contenedor 3. Esto queda de la siguiente manera:




¿Qué pasaría si en lugar de clear:left utilizaramos clear:right? La respuesta es muy simple, con clear:right le estaríamos indicando que rompiera el esquema de ordenamiento de float:right, pero como no hay ninguno definido, no rompe nada, y los elementos se siguen posicionando uno al lado del otro, como vimos que pasaba en los ejemplos anteriores donde solo utilizamos float:left. Esto se visualizaría así:




En las imágenes anteriores observamos que el contenedor 1 se coloca a la izquierda y los demás intentan hacer lo mismo, ya que todos tienen activada su propiedad float:left. En este caso la propiedad clear:right no rompe el esquema ya que se necesitaría que fuera clear:left para romperlo.

Como se había mencionado anteriormente, el contenedor 4, al ya no caber a un lado del contenedor 3, se pasa a una nueva línea, cosa que ya habíamos visto también cómo solucionar.

De esta manera podemos concluir que con las propiedades float y clear y con sus valores permitidos podemos crear muchas formas y esquemas de páginas. A continuación presentamos un ejemplo:




La figura anterior fue estructurada de la siguiente manera:

  • El contenedor 1 tiene activada la propiedad float:left
  • El contenedor 2 tiene activada la propiedad clear:left y float:left
  • Los contenedores 3 y 4 tienen activada la propiedad float:left
  • El contenedor 5 tiene activada la propiedad float:left

De esta manera se puede estructurar una página de diferentes maneras según como se requiera, con la ayuda de las propiedades float y clear.

Si quieres saber como crear una página web desde cero visitas. Como crear una página web completamnete desde cero en html y css

Si te gusta este artículo por favor ayudanos, presiona el boton Google+1 (Google mas 1)
Políticas de privacidad | Términos y condiciones | Recomendación de hosting | Para webmasters | Como se hace..Cursos y tutoriales | Diseño web por ciudades | Osio
Copyright © 2012 | Todos los derechos reservados | Diseñado por mastersitios.com