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Ã:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Aprendiendo Float y Clear</title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> </body> </html>
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.