Uso de la propiedad Float y Clear [CSS]

JaLeRu — Sun, 11 Jan 2009 17:05:23 +0000

Al momento de diseñar nuestra pagina web, las propiedades más importante que debemos aprender para poder lograr casi todas las formas posibles es Float y Clear.
Ambas se trabajan juntas, pues una sirve para complementar a la otra.

Float:

Float en simples palabras es una propiedad de CSS que nos permite “hacer flotar” un elemento a una posición relativa rompiendo el esquema normal de la pagina.
Nos permitirá con facilidad crear paginas con 2 o más columnas, entre muchas otras cosas.

Esta propiedad tiene 3 valores importantes:

Left: Flota el elemento a la Izquierda.
Right: Flota el elemento a la Derecha
None: Que el elemento no Flota.

Ahora veremos una serie de ejemplos.

Primero debemos tener dos archivos, el HTML y EL CSS:
EL HTML sera así:





Aprendiendo Float y Clear



1
2
3
4

Al archivo html lo podremos llamar como queramos, en él simplemente se encuentran 4 divs con un numero dentro y la clase Box asignada a ellos.

Luego nuestro archivo CSS que deberá llamarse style.css y estar en la misma carpeta que el html.

.box{
width:200px;
height:200px;
background:#999;
float:left;
border:1px solid #444;
}

Como vemos le he dado ciertas propiedades como tamaño, color y un borde. Solo para reconocer mejor cada div.

Con este codigo nuestros divs se verían así:

Como vemos el primer div flota a la izquierda y luego los otros intentan lo mismo, quedando al lado en orden.

Así mismo, si en vez de tener float:left lo cambiamos a float:right veríamos todo de la siguiente manera:

Como vemos los objetos “cambiaron sentido” el primer div se fue a la derecha y así los demás se fueron poniendo a su lado en orden.

Para que noten la utilidad y el cambio, veremos como sería sin la propiedad float.

Como se puede ver los objetos no flotan por lo tanto simplemente van quedando uno abajo de otro.
Con float podremos lograr paginas y diseños de varias columnas.

Pero surge un problema, cuando el tamaño de la pantalla es menor a lo que ocupan nuestros objetos estos se irán corriendo para abajo de la siguiente manera:

Este problema se puede solucionar encerrando a todos estos divs dentro de otro que tenga un tamaño igual o mayor al que ocupan todos los divs en linea. Por ejemplo para corregir este error en mi ejemplo deberíamos encerrarlos en un div con un width:808px; (Contando que cada uno mide 200px más 2px de borde y son 4)

Pero puede ocurrir lo contrario, que queramos que se vea como en la imagen anterior pero al agrandar la resolución de pantalla nuestro diseño se deforme y se forme una linea como en la primera imagen. Para eso tenemos Clear.

Clear:

Clear es la propiedad que sirve para “romper” el esquema que estaba formando float.
Como vimos por cada objeto que contenga la propiedad float se irán agrupando a su lado uno tras otro sin interrupción al menos que el tamaño de su contenedor sea menor. Al colocarse clear a un objeto le decimos que actúe como si fuese el primero objeto en tener la propiedad float pero en la siguiente linea, y así el esquema anterior se rompe y comienza uno nuevo de ahí para abajo.
Puede tener los siguientes valor:

Left: Se rompe el esquema de orden para los elementos con “Float:left”
Right: Se rompe el esquema de orden para los elementos “Float:right”
Both: Se rompe el esquema de orden para los elementos con cualquier float, ya sea right o left.

Por ejemplo si en nuestro HTML al tercer div le cambiamos su id a box2 y agregamos al css:

.box2{
width:200px;
height:200px;
background:#999;
clear:left;
float:left;
border:1px solid #444;
}

Con esto, sin importar cuanto agrandemos la pantalla nuestra web se vería así.

Con float y Clear podremos crear muchas formas de paginas, aquí algunos ejemplos.

Espero que les sea de utilidad. Para cualquier duda, comenten.

JaLeRu Blog » CSS

Uso de la propiedad Float y Clear [CSS]

Float:

Clear: