CSS Layout - jasné a jasné
Jasná nemovitost
Když použijeme floatvlastnost a chceme další prvek níže (ne vpravo nebo vlevo), budeme muset použít clear
vlastnost.
Tato clearvlastnost určuje, co se má stát s prvkem, který je vedle plovoucího prvku.
Vlastnost clearmůže mít jednu z následujících hodnot:
-
none- Prvek není zasunut pod levý nebo pravý plovoucí prvek. Toto je výchozí nastavení -
left- Prvek je posunut pod levý plovoucí prvky -
right- Prvek je zasunut pod pravé plovoucí prvky -
both- Prvek je zasunut pod levý i pravý plovoucí prvek -
inherit- Prvek zdědí jasnou hodnotu od svého rodiče
Při vymazávání plovoucích objektů byste měli porovnat clear s plovoucím: Pokud je prvek plovoucí doleva, měli byste vymazat doleva. Váš plovoucí prvek bude i nadále plavat, ale vyčištěný prvek se zobrazí pod ním na webové stránce.
Příklad
Tento příklad vyčistí plovák doleva. Zde to znamená, že prvek <div2> je posunut pod levý plovoucí prvek <div1>:
div1 {
float: left;
}
div2 {
clear: left;
}
Clearfix Hack
Pokud je plovoucí prvek vyšší než prvek, který obsahuje, „přeteče“ mimo svůj kontejner. K vyřešení tohoto problému pak můžeme přidat hack clearfix:
Bez Clearfixu
S Clearfixem
Příklad
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.