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.
javier..semanas…SEMANAS…y no entiendo nisiquera la mitad….¬¬!
Naa gaby, no te preocupi.
Cuando Jestudio tenga su nueva cara sera algo asà como.
Jestudio.
Dont be stupid (8)
Y va salir una advertencia.
Esta pagina puede tener contenido extremadamente ñoño y/o complejo que puede afectar tus neuronas de manera irreparable…. (te volverás inteligente)
wuajajaja!!!javier eres todo un ñoño jaja igual te kero…y yo ya soy inteligente q te pasa xD
chanfle…creo q me volvi inteligent leyendo esto…es demasiao no entiendo ni la mitad!!!!!!!!!!…javier me recalentaste el cerebro i se fundio xD!…pa la proxima pon la advertencia ants de q lo lea ¬¬
jaja caldo yo espere semanas a q subiera algo y lo unico q entiendo es…”una serie de ejemplos” -…xD!!!
xD ….
Perdón Caldo.
Muy interesante lo del clear, el inconveniente es que al parecer no funciona en el Internet Explorer no ? al menos en el 7, a mi me queda una cosa asÃ:
[1][2][4]
[3]
Interesante…la verdad es que hace poco que me di cuenta de esto analizando una plantilla CSS, al fin podré darle un mejor aspecto a mi web!
(que por ahora es una asquerosidad)
buena la explicacion, muy entendible, gracias por el aporte…
Claritos los ejemplos .. “Dicen que una imagen vale más que mil palabras”, por qué en mi caso llevo tiempo dandole vueltas al “clear” y si bien en forma “escrita” entiendo el concepto, con la explicación “gráfica” que acá distes me quedó rotundamente claro.
Un saludo,
Muy bueno el articulo.
Hermano de verdad todo muy claro, no habÃa encontrado información igual en ningun otro lado—-Gracias
Es una de las páginas donde mejor lo entendÃ. Gracias!
No lo habia entendido hasta leer esta esplicacion. ESTA ESPLICACION ES BUENISIMA. GRCIAS.
excelente articulo… esta muy claro.
Cojonudo, la explicación clarÃsima. Me ha sevido un montón, Asias !!