Jak se vyhnout používání čističe?

Každý webdeveloper, který nepoužívá tabulkový layout, ale moderní css layout s floatováním se dostane do problému, kdy se mu prvky vyjmou z nadřazeného bloku, který se vzápětí zcvrkne. Pak mu nezbývá ve většině případů nic jiného, než použít nesématický prvek <div style=„clear: both“></div> před uzavřením nadřazeného bloku.

Tento prvek se musí vložit do kódu pouze kvůli IE6, modernější prohlížeče podporují pseudo třídu :after. Na tomto postupu tedy není nic špatného a na většině mých projektů ho využívám také. Objevilo se ale mnohem elegantnější řešení, které spočívá v přidání pouze jednoho řádku css kódu nadřazenému bloku! Toto řešení není žádná novinka, ale já jsem ho neznal. Dříve jsem používal trochu krkolomnější řešení viz. How To Clear Floats Without Structural Markup , které ale způsobovalo i problémy a já se tedy vrátil k původnímu řešení.

Konec napínání, jde se na věc

Řešení jsem převzal z blogu Peter-Paul Koch . Nadřazenému bloku přiřadíte hodnotu overflow: auto/hidden/scroll a zároveň musí mít nastavenou i hodnotu width, kterou ale v drtivé většině případů nastavujete vždycky.

Pokud toto řešení používáte již „léta“, zdržte se komentářů. Troufám si tvrdit, že ho většina i zkušenějších webdeveloperů nezná. Pokud ho používáte, podělte se o zkušenosti, jestli nezpůsobuje nějaké problémy.


Přečtěte si také:




Komentáře

Zatím nikdo nepřidal komentář, můžete být první.



O autorovi

Pari

Vítejte na mém blogu, rád bych se v krátkosti představil. Je mi 26 let. Momentálně nejvíce času věnuji projektu Lepime.cz - obchod se samolepkami na zeď a tvorbě webů postavených na redakčním systému Drupal pod značkou MEPA.CZ.