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

5 Diseños y propuestas de empaques creativos

El día de hoy quiero compartir con ustedes una pequeña recopilación de propuestas y diseños de packaging; los cuales, han sido creados con diferentes fines: comerciales, estudiantiles, etc. Estos geniales diseños son una buena fuente…

close

Diseñador crea un refugio secreto para trabajar oculto bajo un puente

El diseñador autodidacta Fernando Abellanas ha creado un refugio de trabajo perfecto; el cual, se encuentra perfectamente escondido bajo un puente de la ciudad de Valencia, España. Este genial estudio es un ambiente perfecto de…

close

Creativos posters de terror inspirados en la saga de Harry Potter

El artista Dylan Pierpont ha realizado un magnifico trabajo con estas ilustraciones, las cuales, muestran como seria la saga de Harry Potter si esta cambiara de genero para ser una de terror. Estas ilustraciones muestran como se…

close

Fotógrafo muestra las diferencias entre Corea del Norte y Corea del Sur

Corea del Norte y Corea del Sur son dos países totalmente diferentes, los cuales, solo tienen como similitud el “Corea del” en sus nombres, así lo deja en evidencia el fotógrafo Jacob Laukaitis, el cual, ha…

close

#HEYTWITTER, una denuncia social contra Twitter y los tweets de odio

Shahak Shapira es un activista y artista reconocido por sus peculiares campañas sociales, las cuales, evidencian algunos de los grandes problemas de la sociedad actual. En esta ocasión Shapira ha creado una campaña/denuncia social en…

close

10 Ejemplos de vandalismo como una actividad creativa

Aveces el vandalismo deja huellas de mal gusto en el panorama urbano del mundo, no obstante, existen creativos que crean obras bastante llamativas y amables a la vista. Estas obras están inspiradas en su mayoría…

notifications Recién publicamos
close