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é:
- Jak od sebe odlišit Firefox a Operu pomocí CSS
- Pozor na internetové aukce!
- Jak vydělávat na internetu?
Komentáře
O autorovi
Přidej vlastní názor
Ty