CLEARFiX - xhtml, css, javascript, seo

Čím jiným na blogu pojmenovaném CLEARFiX začít, než se stejnojmeným trikem
Většina kodéru tento trik určitě zná, a pokud ne tak se už určitě setkali s tímto problémem:

	div zarovnaný doleva


	div zarovnaný doprava

Pokud toto udělám, a neošetřím float, tak nám z divu content oba floatované divy „vytečou“.
Dříve se používalo např:

	div zarovnaný doleva


	div zarovnaný doprava

Nebo místo clear=“all“ se používalo (kvůli strictu) class=“clear“, kde clear byl nastylován jako clear:both, ale tento zápis se mí vubec nelíbil, proč kvůli takové „blbosti“ jako jsou dva floatované prvky dávat do kodu další tag, proto vzniknul clearfix:

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */

Po přidání do CSS, upravíme ještě zdrojový kod:

	div zarovnaný doleva


	div zarovnaný doprava

A po této úpravě se nám nic podobného už nemůže stát