Jak na to – Vyčistit plováky (Clearfix)
Naučte se, jak vyčistit plováky pomocí hacku „clearfix“.
Jak vyčistit plováky (Clearfix)
Prvky za plovoucím prvkem budou proudit kolem něj. K vyřešení problému použijte hack „clearfix“:
Bez Clearfixu
S Clearfixem
Clearfix Hack
Pokud je prvek vyšší než prvek, který jej obsahuje, a je plovoucí, přeteče mimo svůj kontejner.
Poté můžeme přidat overflow: auto;
do obsahujícího prvku, abychom tento problém vyřešili:
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;
}
Tip: Learn more about floats in our CSS Float Tutorial.