Selge CSS-i vara on alates CSS1-st olnud CSS-i osa. See võimaldab määrata, millised elemendid võivad ujukalt eemaldatud elemendi kõrval ja millistel külgedel (-atel). Selge vara on viis võimalikku väärtust:
- pole ühtegi
- lahkus
- õige
- mõlemad
- pärida
Kuidas kasutada CSS-i selge vara
Selge vara kõige tavalisem viis on kasutada seda, kui olete elemendis ujuki vara kasutanud. Näiteks:
Minu pildi kõrval olev tekst.
Tekst, mis on minu pildi all.
Kõik elemendid vaikimisi selge: pole; , nii et kui te ei soovi midagi elementide kõrval ujuda, peate muutma selge stiili.
Kui olete ujukite puhastamisel, siis sobib oma selge oma ujukiga. Nii et kui te elementi vasakule liigute, siis peaksite paremale jääma. Teie ujutatud element jätkab ujumist, kuid puhastatud element ja kõik pärast seda kuvatakse selle all veebilehel.
Kui teil on nii paremale kui ka vasakule asetatud elemente, saate kustutada ainult ühe külje või saate mõlemad selgeks teha.
Kasutusviiside abil selge kasutamine
Kõige levinum viis, kuidas enamik disainereid kasutavad selge vara, on lehe elementide kujunduses . Võimalik, et pildil on mõni pilt ujuvas tekstiosas ja soovite, et järgmine punkt alustaks pilt allapoole, või teil võib olla kogu teksti veerg, mida soovite mõne teise hulga teksti kõrval hõljuda, kusjuures mõni tekst kuvatakse allpool.
Siin on HTML vormingus kujundus.
Sellel on üks div konteiner, millel on teine, mis on vasakule ujutatud.
Lühike ujutatud div
Mahuti divi sisu, mis hakkab olema ujutatud divi paremal.
See toimib hästi, lühema diviga, mis ulatub ülejäänud põhiosa sisust vasakule.
Uue karbi kõrval saate teksti kustutada, lihtsalt lisades sildi, kuhu soovite alustada kirjutamist ujutatud kasti all.
Kuid probleem tekib siis, kui ujutatud kasti pikkus on selle kõrval olevast sisust. Siis, nagu näete, ei toimu põhiekraani taustavärvi allapoole kast väljapoole.
Õnneks on lihtne seda lahendada: vara. Seadistades põhikast ülevoolu: auto; taustavärv jääb pikema ujutatud kasti kõrval oleva ala külge, nagu on näidatud käesolevas näites .