F1 Help! La solución que buscabas

Desarrollo, programación, tips, consejos y soluciones para los usarios de PC

domingo, 3 de julio de 2011

Separador (clearfix) CSS sin etiquetas HTML

Cada vez que utilizamos la propiedad float:left/right en nuestro CSS, para armar la estructura de nuestro sitio, tenemos que estar atentos a que si los bloques que estamos "flotando" tienen distinto alto puede ocurrirnos que los bloquespresenten un comporamiento no deseado.
Es por esto que al final de los elemento flotantes colocabamos un elemento de bloque con la propiedad clear:both para solucionar este inconveniente o asegurar la disposición que estabamos buscando. Ya que este elemento se situaba por debajo de todos los bloques y cerraba nuestro contenedor.

El problema de esta solución es que estamos agregando HTML a la página que no tiene ningun sentido (semántico) para el contenido y el significado del sitio. Además si el contenido que se genera es dinámico tenemos que asegurarnos que el elemento se agregue al final para que no produzca efectos colaterales y se cierre correctamente el contenedor.

Es por eso que desde CSS-Tricks nos acercan esta solución CSS:
.grupo:before,
.grupo:after {
    content:"";
    display:table;
}
.grupo:after {
    clear:both;
}
.grupo {
    zoom:1; /* For IE 6/7 */
}

La clase "grupo" debe colocarsele al elemento contenedor (padre de todos los elementos flotantes) que contiene a los bloques de contenido. Esto producirá obtener nuestro tan necesario "separador", dejando nuestro HTML limpito, además de agregar y mantener la semántica de las etiquetas.

Podemos ver un ejemplo de aplicación aquí.

No hay comentarios: