Cómo usar la propiedad float y clear en CSS

Al diseñar nuestra pagina web, las propiedades CSS más importantes a aprender para lograr casi todas las formas 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.

Ahora veremos una serie de ejemplos.

Primero debemos tener dos archivos, el HTML y el CSS.

EL HTML sera así:

Código :

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

Código :

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

Código :

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

PD. Feliz Cumpleaños Clab (aun no entiendo por que lo celebramos hoy si según la FAQ debería ser el 8 de enero) . A modo de regalo doy este tip o tutorial. Ya lo había publicado anteriormente en mi blog, pero se que aquí se le podrá sacar más provecho.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Cómo usar la propiedad float y clear en CSS

Float:

Clear:

Publica tu comentario

o puedes...