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 */
}

Título semántico en listas HTML

Al tratar de otorgarle más semántica nuestro marcado HTML nos hemos encontrado que no exista dentro de nuestra lista (UL) una etiqueta para informar el título de la lista (algo que describa los elementos de la misma). En cambio etiquetas como "fieldset" tienen a "legend" para titularlas

Ejemplo:

Mi leyenda

Mi contenido dentro del fieldset

También tenemos a "thead" y "th" para generar encabezados semánticos a nuestras tablas.

Como en las listas no existe nada de esto, pensé en utilizar el atributo title de todo elemento y combinarlo un poco con los pseudo-elementos "before" y "after" para poder obtener mi título semántico.

El código es el siguiente:

<ul title="Navegadores que soportan título semático en UL OL DL">
    <li>IE 8+</li>
    <li>FF 3+</li>
    <li>Chrome</li>
    <li>Opera 6+</li>
    <li>Safari 4+</li>
</ul>

Y el CSS aplicado:

ul{
    list-style-type:square;
    padding-left:20px;
}
ul:before{
    content:attr(title);
    position:relative;
    left:-20px;
    color:blue;
    font-weight:bold;
}

Para obtener este resultado