CSS aiškios nuosavybės supratimas

Aiškus CSS turtas buvo CSS dalis nuo CSS1. Tai leidžia jums nurodyti, kokie elementai gali plisti šalia išvalyto elemento ir iš kurios pusės (-ų). Aišku turtu turi penkias galimas vertes:

Kaip naudoti CSS išvalyti Property

Dažniausiai naudojamas aiškus turtas yra tada, kai elementą naudojate su plūdžiu. Pavyzdžiui:

Tekstas šalia mano nuotraukos.

Tekstas žemiau mano paveikslėlio.

Visi elementai pagal nutylėjimą išvalyti: nė vienas; , taigi, jei nenorite, kad kiti elementai plauktų šalia kažko, turite pakeisti aiškų stilių.

Kai išvalote plūdes, jūs tiksliai suderinate savo plūduriuojančius elementus. Taigi, jei jūs plaukiate elementą į kairę, tada turėtumėte išvalyti į kairę. Jūsų plūduriuojantis elementas ir toliau plūks, tačiau išvalytas elementas ir viskas po jo atsiras žemiau jo tinklalapyje.

Jei turite elementus, kurie yra išplėsti tiek į dešinę, tiek į kairę, galite išvalyti tik vieną pusę arba galite išvalyti abu.

Naudokite aiškiai išdėstytus elementus

Dažniausiai būdas, kuriuo dauguma dizainerių naudoja aiškią nuosavybę, yra puslapio elementų išdėstymas . Galite turėti paveikslėlį, plūduriuojantį viduje teksto bloko, ir norėtumėte, kad po paveikslu būtų paleista kita pastraipa arba galėtumėte turėti visą teksto stulpelį, kurį norite plūdėti šalia kito teksto krūvos, o kai kuris tekstas rodomas žemiau.

Šioje formoje pateikiamas HTML išdėstymas.

Jame yra viena dėžutė, kurioje yra kitas, kuris yra plaustas į kairę.



Trumpas plaukiojantis divas



Turinys, esantis vidinėje konteinerio dalyje, kuris bus į dešinę nuo išplėsto divo.

Tai veiks gerai, su trumpesniu div plaukiojančiu į kairę nuo likusio pagrindinio divo turinio.

Galite išvalyti tekstą šalia išplėsto langelio tiesiog pridėdami žymą, kur norite, kad jis pradėtų rašyti pagal išplėstą langelį.

Tačiau problema kyla, kai plūduriuojantis dėžutė yra ilgesnė už turinį šalia jo. Tada, kaip matote, pagrindinio dėžutės fono spalva nėra perkeliama į apatinę dėžutę.

Laimei, yra lengvas būdas išspręsti šią problemą: nuosavybė. Nustatydami pagrindinį langelį, kad perpildytumėte: auto; fono spalva išliks šalia ilgesnės išplėstos dėžutės iki pat apačios, kaip parodyta šiame pavyzdyje .