Jak na moderní clearování bloků v CSS

Přináším zajímavý tip pro webdesignery, který byl zřejmě mnohým zatajován a dodnes se o něm valně nemluví (V době psaní článku této techniky nevyužívá ani např. Seznam.cz). Jedná se o metodu, díky které můžete jednoduše donutit HTML elementy, aby se správně roztáhly na výšku dle svého obsahu, pokud se v nich vyskytují jiné "zafloatované" elementy.

Dříve se tento nedostatek nejčastěji řešil pomocí vnořeného neviditelného divu, který měl nastavenu vlastnost "clear: both;" a který se umístil až na konec nadřazeného elementu .

Struktura mohla vypadat třeba takto:
<div>
  <div id="float">
    Tento blok je plovoucí.
  </div>
  <div class="clear">
  </div>
</div>

Způsob, který Vám chci ukázat dnes funguje prakticky na podobném principu, jen je vše řešeno elegantněji za pomocí CSS.

Ke stejné funkčnosti jako v předchozím případě Vám ale bude stačit tato CSS definice:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Funguje to tak, že se díky pseudoelementu :after vytvoří na konci divu třídy clearfix pomyslný obsah (v tomto případě tečka) a tomuto obsahu se nastaví právě vlastnost "clear: both;". Samozřejmě nechceme, aby tato tečka byla vidět a proto nastavíme další vlastnosti, abychom jejímu zobrazení zabránili.

Geniální? Vskutku... Ale co webdesignery oblíbené IE? To ve starších verzích clearuje obsah automaticky a pro novější verze je zde jednoduchá oprava. Stačí třídě clearfix přidat vlastnost "zoom: 1;" , nejlépe ovšem do samostatného stylu, který se podmíněným příkazem načte pouze pro IE.

Více o této problematice ve článku, z kterého jsem čerpal: http://www.positioniseverything.net/easyclearing.html