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

‘In the World of Play-Doh’ una campaña dirigida a niños y adultos

Play-Doh es una marca que es capaz de volver al más amargado de los adultos en un inofensivo niño con ganas de experimentar; esto sucede debido a que la marca nos hace querer extrañar las…

close

play_circle_outline Spider-Man: Homecoming estrena su ultimo trailer

La madrugada de este miércoles se dio a conocer el ultimo trailer de Spider-Man: Homecoming; la nueva película del hombre araña que tendrá como co-protagonista a Iron Man. En esta ocasión se hace evidente que esta…

close

Que tipo de trabajador eres según tu escritorio o espacio de trabajo

El espacio de trabajo suele decir mucho del que lo ocupa; no obstante, esto no queda claro cuando tu eres dueño del área a juzgar; por lo que el día de hoy quiero compartir con…

close

Glasstic type, tipografía en 3D por el diseñador Rafael Merino

Rafael Merino es el responsable de este experimento de diseño que comprende una genial propuesta tipográfica en 3D; esta nos muestra una serie de números apreciables en tres dimensiones a manera de espejos. En lo…

close

Diseñadora cataloga los colores de diferentes paisajes con ayuda de Pantone

Pantone se esta convirtiendo en referencia cuando tratamos de hablar el lenguaje del color; esto se hace evidente cuando notas que la recurrente tendencia en ámbitos como la fotografía, el arte y el diseño. Es por…

close

Como crear un Cinemagraph en menos de un minuto con Photoshop

Adobe continua lanzando pequeños tutoriales para motivar la supervivencia creativa entre sus usuarios; ello lo logra enseñando maneras de crear efectos de doble exposición y logotipos en algunas de sus plataformas. Razón por la cual,…

notifications Recién publicamos
close