Pochopení vlastností vymazání CSS

Jasná vlastnost CSS je od CSS1 součástí CSS. Umožňuje určit, které elementy mohou plavat vedle vyčistěného prvku a na které straně. Jasná vlastnost má pět možných hodnot:

Jak používat funkci CSS clear Vlastnost

Nejčastějším způsobem, jak používat funkci vyčistit, je poté, co jste na prvku použili vlastnost float. Například:

Text vedle mého obrázku.

Text, který je pod mým obrazem.

Všechny výchozí prvky jsou vymazány: žádné; , takže pokud nechcete, aby vedle něčeho plavily další prvky, musíte změnit jasný styl.

Když vybíráte plavečky, přizpůsobíte se vašemu plastu. Takže pokud jste prorazili prvek doleva, měli byste se vynulovat doleva. Váš pohyblivý prvek bude nadále plavat, ale vyčištěný prvek a vše, co se po něm objeví, bude na jeho webové stránce zobrazeno.

Pokud máte prvky, které jsou přenášeny jak do pravého, tak doleva, můžete vyčistit pouze jednu stranu, nebo je můžete vymazat.

Pomocí příkazu Clear v rozložení

Nejběžnějším způsobem, jakým většina návrhářů používá jasnou vlastnost, je rozložení prvků stránky . Můžete mít obrázek plovoucí uvnitř bloku textu a chcete, aby další odstavec začal pod obrázkem, nebo můžete mít celý sloupec textu, který chcete plavat vedle jiné banda textu a některé text se objeví níže.

Zde je HTML pro rozložení v tomto formuláři.

Má jeden divový kontejner, který drží jiný, který je vznášen doleva.



Krátká floata div



Obsah uvnitř kontejneru div, který bude vpravo od plavidla div.

To bude fungovat dobře, s tím, že kratší div plavec vlevo od zbytku obsahu hlavního div.

Text můžete umístit vedle plovoucího rámečku jednoduše přidáním značky, kde chcete, aby začal psát pod floatovaným rámečkem.

Problém však přichází, když je plovoucí box delší než obsah vedle ní. Poté, jak vidíte, barva pozadí hlavního boxu není přenášena dolů do spodní části plovoucího boxu.

Naštěstí existuje snadný způsob, jak to vyřešit: vlastnost. Nastavením hlavního boxu na přetečení: auto; barva pozadí zůstane vedle delší plovoucí krabice až na dno, jak je ukázáno v tomto příkladu .