Každý kdo se v HTML a CSS orientuje nejspíš ví, jak vytvořit plovoucí design. Ví, že k tomu potřebujeme float a clear, a že výchozí hodnotou pro prvky je flout a clear  je none.

Při formátování stránky to znamená, že prvek, který má  například clear:left, musí zvětšit svůj horní okraj (margin-top) tak, aby začínal až pod spodním okrajem všech předchozích vlevo plovoucích prvků. Neboli prvek s clear:left se zobrazí až pod všemi předchozími levostrannými plaváčky. To samé platí pak pro clear:right, který počká až na konec těch pravostranných. Má-li clear:both, zobrazí se až pod všemi předchozími floaty.

Pojďme se dnes podívat na to, jak tento prvek vytvořit a jaké máme možnosti.

drechy.cz ukázka

Ukázka před použitím metod

Klasika

Nejklasičtější způsob, který se nejčastěji používá  je prvek <div class="clear"></div> a css clear. V CSS to pak vypadá následovně div.clear{clear:both;}

ukázka zde

Řešení přes overflow

Tento způsob je o něco rychlejší než předchozí, stačí pouze přidat vlastnost  overflow: hidden; do rodičovského prvku.  Ale má také několik nevýhod. Pokud by náš rodičovský prvek obsahoval dropdown menu, položky, které jsou za hranicí rodičovského prvku budou skryté.

ukázka zde

CSS řešení – clear fix hack

Toto řešení využívá CSS vlastnosti before a after. K rodičovskému prvku se přidá nová třída například clear. V CSS to poté vypadá následovně:

.clear:before,.clear:after{
content: "";
display:table;
}
.clear:after{
clear:both;
}

V podstatě se jedná o stejné řešení jako v prvním případě, ale není potřeba žádného dalšího prvku v html, je tedy víc elegantní.

ukázka zde