Embed Size (px)
DESCRIPTION
Guia CSS Acerca de Float y Clear Para Estructurar Una Web
Citation preview
Guia CSS acerca de Float y Clear para estructurar una web
Al momento de diseñar nuestra pagina web, las propiedades más importante que debemos aprender
para poder lograr casi todas las estructuras posibles son 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 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.
Ejemplos de estructuras web usando float y clear del CSS
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=utf-8"> <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.
