Celkový layout (rozložení) stránky se z historicky-technických důvodů dělá různě: tabulkou, plovoucímu prvky či JavaScriptem.
Moderní prohlížeče ale nabízejí jednu metodu (s gridem jsou vlastně dvě), která dokáže prvky na stránce uspořádat tak, aby si zachovali svůj vzhled a zároveň se přizpůsobily stránce.
Pokud používáte plovoucí prvky, asi narazíte na problém, že prvky, které je obtékají se chovají poněkud podivně a zasahují i do prostoru rezervovaného pro plovoucí prvky:
V případě textu obtékajícího obrázek, což je nejčastější použití v článcích, je to efekt očekávaný, ale co dělat, když potřebujete, např. ve speciálním layoutu webové aplikace, aby prostřední prvek vyplnil prostor mezi plovoucími prvky a přitom do nich nepřesahoval?
Řešení je kupodivu velice jednoduché – stačí prostředními prvku nastavit oveflow:hidden a prohlížeč, aby zabránil překrývání plovoucího prvku obsahem toho prostředního, změní jeho šířku.
Pokračování textu Jak vyplnit prostor mezi plovoucímy prvky?
Element HR slouží jako vodorovná čára. Pokud ho ale nepoužíváte a naopak používáte plovoucí prvky (float), občas (nebo spíše často) můžete potřebovat obtékání zastavit (clear).
K tomu lze snadno použít právě element HR, kterému seberete okraj (border):
hr {
clear: both;
border: 0 none;
height: 0;
}
Díky tomu, že HR ve výchozím stylu zabírá pouze jeden pixel na výšku (někdy 2px, protože vytváří stínovanou čáru) a má pouze horní rámeček (border-top), se dá takhle snadno změnit na neviditelný oddělovač plovoucích prvků.