Guia CSS de la propiedad Float y Clear para estructurar una web

Actualizado el 09/03/2010 < > 11 Cometarios

Resumen: 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.

Meneame Bitacoras

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í:
Propiedades Float y Clear de CSS Example 1

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:

Propiedades Float Clear CSS Example 2

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.

Propiedad Float y Clear CSS Example 3

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:

Propiedad Float de CSS Example 4

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í.

Propiedad Clear y Float de CSS Example 4

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

Float Example 5

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

Meneame Bitacoras

Publicado el 09/03/2010, última actualización 09/03/2010.

Autor: Javier Letelier Ruiz

URL: Jestudio.cl

Añadir Comentario (Subir al texto)

11 Cometarios

  1. BeRubier

    Interesante articulo. Cada vez se me va dando mejor esto de maquetar y demas, aunque sigo siendo un negao. xD

    Martes, 9 de marzo 2010

  2. alberto

    muy interesante muchas gracias

    Lunes, 15 de marzo 2010

  3. Maquetación de una web: La propiedad float de CSS

    [...] dos celdas adyacentes en una misma fila. La forma de hacer lo mismo con CSS, es empleando la propiedad float. En la actualidad, la propiedad float de CSS tiene una amplia aceptación y difusión, a tal punto [...]

    Lunes, 22 de marzo 2010

  4. BeatMaker_

    Genial, muchas gracias por la información :D!

    Martes, 29 de junio 2010

  5. cesar aguirre vega

    hola, gracias por el articulo fue muy valiosa para mi, tengo una pregunta: si el header es lo bastante grande no hay necesidad de colocarle float:left, refiriendome a los dos ultimos imagenes; muchas gracias

    Jueves, 12 de agosto 2010

  6. Verónica Milán

    Hola Cesar,

    Yo personalmente no lo colocaría no, teniendo en cuenta la imagen del ejemplo no es necesario darle un float al div de cabecera…

    Saludos.

    Jueves, 12 de agosto 2010

  7. Jaime Carte

    Con esa explicación, haste el más negao (como yo) entiende… muuchas gracias!!

    Miércoles, 8 de septiembre 2010

  8. ronald

    gracias mejor explacacion imposible… =)

    Lunes, 15 de noviembre 2010

  9. darius

    hola. como estas? realmente la info que publicas me ayudo mucho. Gracias.
    Pero se me presenta una complicación: estoy maquetando una web a 3 columnas (left, contenido y right) pero debajo de estas quiero otras 3 (left1, contenido1 y right1). el problema se presenta en que si left en mas larga que cualquiera left1, contenido1 y right1 se corren hacia abajo y me quedan espacios en blanco entre el contenido y contenido1 y tambien entre right y right1. como puedo arreglar esto para que sin importar el largo de cada columna, todos los espacios se completen y no queden lugares en blanco?
    Gracias

    Miércoles, 15 de diciembre 2010

  10. Verónica Milán

    mmm sin verlo no se muy bien a que te refieres… pero con el tema de flotar capas, me imagino el problema que tienes… creo que tienes dos opciones si no me equivoco, darle un alto a las columnas, o darle un clear: right a la última columna de cada fila… esero que sea esto a lo que te refieres.

    Saludos!

    Viernes, 7 de enero 2011

  11. Nicolás Cussigh

    Lo mejor para ahorrarte todo el problema de armar un layout con los distintos id’s/class es usar un framework. Clases de css que forman un “container” y a su vez posibilita el uso de grids, con esto te podés llegar a ahorrar hs de maquetado.

    Recomendación: blueprint, 52framework (html5-css3).

    Viernes, 13 de enero 2012

(Subir al texto)

Añadir Comentario

* Campos obligatorios