Padėkite kurti svetainę ir pasidalykite straipsniu su draugais!
Įvadas į CSS Clearfix
CSS „išvalymas“ yra procesas, skirtas elementui automatiškai pataisyti arba išvalyti elementus. Tam nereikės jokio papildomo žymėjimo kodo. Ši „clearfix“ koncepcija naudojama su plūduriuojančiais išdėstymais, kai elementai yra plūduriuojami, kad būtų sukrauti horizontaliai. Jei bet kuris HTML elementas yra aukštesnis už vidinį elementą, mes panaudojome CSS perpildymo savybę, kad išspręstume šią problemą.
Realiuoju laiku Pavyzdys: Tarkime, kad HTML div žymoje turime pastraipos turinį, o ši div žyma turi vaizdą.Tačiau vaizdas netelpa į div žymą, tada turime naudoti „clearfix“ sąvoką. Šią problemą taip pat galime išspręsti padidindami div žymos elemento aukštį arba pritaikę tam elementui float ypatybę. Galite stebėti toliau pateiktą vaizdą prieš ir po to, kai taikote „clearfix“ koncepciją.
Kaip Clearfix veikia naudojant CSS?
CSS clearfix naudojamas norint sutaisyti perpildymo elementus iš norimo elemento. Tai galima dirbti su 3 savybėmis:
- Perpildymo nuosavybė
- Aukščio nuosavybė
- Plaukiojantis turtas
Šios visos 3 CSS savybės naudojamos perpildymo elementams taisyti.
Sintaksė:
1. Perpildymo nuosavybė
div}
{
perpildymas: auto
2. Aukščio nuosavybė
div}
{
aukštis: vertė;
3. Plūduriuojanti nuosavybė
div}
{
float: value;
CSS Clearfix diegimo pavyzdžiai
Toliau pateikiami įgyvendinimo pavyzdžiai:
1. Išvalyti pataisą su perpildymo savybe
Kodas:
ClearFix CSS
The
"Clearfix CSS yra procesas, skirtas elementui automatiškai pataisyti arba
"išvalyti jo elementus. Tam nereikės jokio papildomo žymėjimo kodo.
"Ši išaiškinimo koncepcija naudojama su plūduriuojančiais išdėstymais, kai elementai yra
"plūduriuojama, kad būtų sukrauta horizontaliai. Jei bet kuris HTML elementas yra aukštesnis
nei vidinis esantis elementas, tada naudojome perpildymo savybę CSS
įveikti šią problemą. Realaus laiko pavyzdys: Tarkime, kad turime
pastraipos turinys HTML žymoje „div“ ir ši „div“ žyma turi vaizdą.
"Bet vaizdas netelpa į div žymą, tada turime naudoti clearfix
"koncepcija. Šią problemą taip pat galime išspręsti padidinę div žymą
elemento aukštis arba plūduriavimo savybės taikymas tam elementui. Galite
stebėkite toliau pateiktą vaizdą prieš ir po to, kai taikote „clearfix“ koncepciją.
Išvestis: Prieš taikant perpildymo ypatybę.
Išvestis: Pritaikius perpildymo ypatybę.
2. Clearfix su aukščio savybe
Kodas:
ClearFix CSS The
"Clearfix CSS yra procesas, skirtas elementui automatiškai pataisyti arba
"išvalyti jo elementus. Tam nereikės jokio papildomo žymėjimo kodo.
"Ši išaiškinimo koncepcija naudojama su plūduriuojančiais išdėstymais, kai elementai yra
"plūduriuojama, kad būtų sukrauta horizontaliai. Jei bet kuris HTML elementas yra aukštesnis
nei vidinis esantis elementas, tada naudojome perpildymo savybę CSS
įveikti šią problemą. Realaus laiko pavyzdys: Tarkime, kad turime
pastraipos turinys HTML žymoje „div“ ir ši „div“ žyma turi vaizdą.
"Bet vaizdas netelpa į div žymą, tada turime naudoti clearfix
"koncepcija. Šią problemą taip pat galime išspręsti padidinę div žymą
elemento aukštis arba plūduriavimo savybės taikymas tam elementui. Galite
stebėkite toliau pateiktą vaizdą prieš ir po to, kai taikote „clearfix“ koncepciją.
Išvestis: Prieš taikant aukščio savybę.
Išvestis: Pritaikius aukščio savybę.
3. Clearfix su perpildymo ir plūdimo ypatybėmis 2 vaizdams.
Kodas:
"CSS išvalymas yra procesas, skirtas elementui į"
ClearFix CSS
automatiškai pataisyti arba išvalyti jo elementus. Tam nereikės jokių
"papildomas žymėjimo kodas. Ši ištaisymo sąvoka naudojama su float
"maketai, kuriuose elementai yra plūduriuojami, kad būtų sukrauti horizontaliai. Jei
bet kuris HTML elementas yra aukštesnis už vidinį elementą, tada mes
naudojo CSS perpildymo savybę, kad išspręstų šią problemą. Realiu laiku
Pavyzdys: tarkime, kad pastraipos turinys yra HTML žymoje div ir
taip pat ši div žyma turi vaizdą. Bet vaizdas netelpa į div žymą
"tada turime naudoti clearfix sąvoką. Mes taip pat galime tai įveikti
"problema padidinus div žymos elemento aukštį arba pritaikius float
nuosavybė tam elementui. Galite stebėti žemiau esantį vaizdą prieš ir
pritaikius clearfix koncepciją.
Išvestis: Prieš taikant perpildymo ypatybę.
Išvestis: Pritaikius perpildymo ypatybę.
Išvada
CSS išvalymas taikomas perpildytiems HTML elementams. Šią išaiškinimo koncepciją galima atlikti nustatant aukštį arba perpildymo ypatybę arba nustatant plūduriuojančią ypatybę norimam elementui, kad būtų išvengta elemento perpildymo.
Rekomenduojami straipsniai
Tai yra CSS Clearfix vadovas. Čia aptariame įvadą, kaip sukurti „clearfix“ darbą css su pavyzdžiais, kuriuos galima įgyvendinti naudojant kodus ir išvestis. Taip pat galite peržiūrėti kitus susijusius straipsnius, kad sužinotumėte daugiau -
- CSS pamušalas
- CSS padėtis
- CSS perpildymas
- CSS patvirtinimo priemonė