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

#FreeTheFeed, una creativa campaña que muestra una bubi gigante en Londres

#FreeTheFeed, es una creativa campaña que busca crear conciencia sobre la lactancia materna; la cual en muchos países sigue siendo un tema controversial debido a que expone una parte del cuerpo femenino. #FreeTheFeed busca acabar…

close

La segunda película de Ralph el demoledor ya tiene nombre…

Disney revelo a través de Twitter el nombre de la segunda película de “Ralph, El demoledor” y con ello la dirección de su trama que al parecer ya no estará centrada solo en vídeo juegos….

close

play_circle_outline Este es el aterrador trailer de It, la nueva adaptación del clásico de Stephen King

It, unos de los clásicos más aterradores del escrito Stephen King esta por recibir su nueva adaptación cinematográfica; “It” o “Eso” en español marco la década de los 90’s con el aumento de la coulrofobia en…

close

Construct, un editor para crear juegos multi plataforma en linea

Construct es un interesante editor para crear juegos en linea, actualmente es una aplicación gratuita ya que esta en estado beta, Construct 3 únicamente funciona en Gooogle Chrome 57 o versiones superiores. Si bien el…

close

Adorables figuras tejidas para calentar los huevos, literal

El día de hoy quiero compartir con ustedes estas geniales figuras tejidas que tienen un fin poco convencional; estas figuras creadas por la tienda SpringFreshness son útiles si necesitas calentar tus huevos para el desayuno. Estas adorables…

close

play_circle_outline Genial campaña de realidad virtual implementada en un carretera en Perú

Sodimac ha lanzado una campaña de realidad virtual en una carretera en Perú; esta campaña que ha sido implementada como una solución para combatir la contaminación visual. Esto se debe a que la carretera en…

notifications Recién publicamos
close