Hola pues les voy a poner un post muy útil para aquellos diseñadores o desarrolladores que aman el hacer paginas tableless, uno de los problemas mas frecuentes con el que nos topamos es que tenemos un div contenedor que va conteniedo dentro de si mismos otros divs en la mayoria de los casos, pero muchas veces utilizamos un recurso conocido como Float, el cual pega el div a la izquierda o derecha, ajusta dicho al tamaño del contenido, que pasa cuando hacemos esto que si el div con float crece a lo alto y se pasa del tamaño marcado en los estilos, el div contenedor no detecta su altura y si tenemos un fondo en el contenedor que se esta repitiendo simplemente ya no lo hace más.
la solución a esto era cansada y tediosa, tenias que meter manualmente la altura a cada div con float segun el archivo una altura diferente segun la necesidad.
actualmente con el metodo de CSS y la propiedad
:after declaramos una clase le podemos poner como queramos, y esa clase va a tener un comportamiento o una propiedad llamada
:after.
esta propiedad lo que le indica a la clase es que despues de todo el contenido de un objeto en este caso nuestro div, ponga un texto, en este caso pondremos un punto, este punto forsara a nuestro div contenedor a estirarse porque estara situado al final del mismo y obio los div ddetectan los textos, y listo se termina el problema de las alturas de los contenedores cuando encierran divs con propiedad float.
Al punto que introducimos lo reducimos en su altura a 0 y le ponemos visible escondido para que no se vea.
les pego el codigo con el respectivo hack para IE saludos:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-table;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
Espero les sea super Util XD