Jasná vlastnosť CSS je od CSS1 súčasťou CSS. Umožňuje určiť, ktoré prvky môžu plávať vedľa vyčisteného prvku a na ktorej strane (stránkach). Jasná vlastnosť má päť možných hodnôt:
- nikto
- ľavý
- správny
- oba
- zdediť
Ako používať CSS clear Vlastnosť
Najobvyklejším spôsobom, ako použiť vlastnosť "clear", je po použití vlastnosti float na prvku. Napríklad:
Text vedľa môjho obrázka.
Text, ktorý je pod mojim obrazom.
Všetky predvolené hodnoty vyčistiť: žiadne; , takže ak nechcete, aby ďalšie prvky plávali vedľa niečoho, musíte zmeniť čistý štýl.
Keď zúčtujete plaváky, prispôsobíte sa vášmu jasu na váš plavák. Ak ste prvok posunuli doľava, mali by ste vyčistiť vľavo. Váš vznášaný prvok bude pokračovať v pohybe, ale vyčistený prvok a všetko po ňom sa objaví pod ním na webovej stránke.
Ak máte prvky, ktoré sa vznášajú do pravého aj ľavého okraja, môžete vyčistiť iba jednu stranu, alebo ich môžete vymazať.
Použiť jasné v rozložení
Najbežnejší spôsob, akým väčšina návrhárov používa jasnú vlastnosť, je v rozložení prvkov stránky . Môžete mať obrázok plávajúci vnútri bloku textu a chcete, aby nasledujúci odsek začal pod obrázkom, alebo môžete mať celý stĺpec textu, ktorý chcete plávať vedľa ďalšej zväzku textu, pričom sa objaví nejaký text.
Tu je HTML pre rozloženie v tomto formulári.
Má jednu kontajnerovú kontajnerovú kontajnerovú kontajnerovú, ktorá je vznášaná vľavo.
Krátka loď div
Obsah v kontajneri div, ktorý sa nachádza napravo od float div.
To bude fungovať v poriadku, pričom kratšia časť sa vznáša naľavo od zvyšku obsahu hlavnej div.
Môžete vymazať text vedľa floated poľa jednoduchým pridaním značky, kde chcete, aby začal písať pod floated boxom.
Problém však prichádza, keď je floatovaný box dlhší než obsah vedľa neho. Potom, ako vidíte, farba pozadia hlavného poľa nie je prenesená do spodnej časti plovoucej krabice.
Našťastie existuje jednoduchý spôsob, ako to opraviť: majetok. Nastavením hlavného poľa na pretečenie: auto; farba pozadia zostane vedľa dlhšej plovoucej krabice až k úplnému dnu, ako je to znázornené v tomto príklade .