CSS: Como usar el Float y el Clear y no perder la cabeza

Uno de los dolores de cabeza mas fuertes cuando estamos maquetando con CSS en un sitio es el uso del atributo float en nuestras capas ya que si estan contenidas dentro de otra capa esta usualmente no converva la altura de la capa que tiene el atributo float.

Como evitar esto? en donde lo podemos utilizar? pues bueno las repuesta son las siguientes:

Como evitar esto?

Utilizando un capa extra con el atributo clear:both;

[code lang=”css”]

.clearfix{
clear:both;
}

[/code]

En donde lo podemos utilizar?

En un template con mas de una columna.

En un calendario ya ven que son cuadritos consecutivos dentro de un contenedor.

o incluso en un ordenamiento de bloques como el que utiliza los startups como netvibes.

[code lang=”css”]

.contenedor{
border:1px solid #cccccc;
padding:2px;
margin:2px;
}

.capa{
border:1px dashed #cccccc;
background:#f2f2f2;
width:110px;
height:110px;
float:left;
}

.clear{
clear:both;
}

[/code]

[code lang=”html”]

01
02
03
04
05
06

[/code]

ver ejemplo

Espero estos tips les sean utiles y si hay dudas pues solo pregunte ;)

comment ¿Que opinas?

Artículos recientes

close

Impresionantes paisajes espaciales creados a mano por Adam Makarenko

Adam Makarenko es un fotógrafo que ha demostrado su habilidad al lente y con las manos con esta increíble sesión fotográfica creativa;. Con un genial aspecto estas fotografías podrían parecer que son emitidas por la…

close

Nintendo anuncia SNES Mini la nueva miniatura nostalgica

SNES mini – la nueva consola de la nostalgia de Nintendo Nintendo sigue apostando por la nostalgia como estrategia de venta y posicionamiento; en primera instancia Nintendo presentó la “NES Mini“; la cual, fue todo…

close

play_circle_outline The Story of an idea, animación de Google muestra cómo se desarrollan las ideas

En el marco del Google I/O 2017 la multinacional Google busca inspirar a los asistentes de su evento así como a los creativos en general con la siguiente animación. Esta animación titulada “The Story of…

close

El rebranding de una panadería que fue de lo común a lo minimalista

Todas las empresas necesitan renovar su imagen y marca de vez en cuando; es por eso, que siguiendo esta premisa la agencia creativa mousegraphics ha realizado una renovación increíble para la empresa Mills of Saint George; este cambio…

close

Spinner Car la creación rusa de relajación para entusiastas de los autos

La moda de los Spinners contra el estrés está por todas partes y los amantes de los vehículos no podían quedarse atrás. Conducir un vehiculo debe ser la practica más relajante para los amantes de…

close

Pack with Care, una creativa y bonita campaña contra el abandono animal

Pack With Care es el nombre de esta campaña realizada y lanzada por SPCA (Sociedad para la Prevención de la Crueldad a los Animales) y Home Hardware en Canadá; esta creativa campaña busca crear conciencia sobre…

notifications Recién publicamos
close