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:
Publicar un comentario