Naudojant „Clearfix“ ypatybę galima automatiškai pakoreguoti pirminį elementą pagal antrinį elementą ir išspręsti HTML kodo problemas naudojant kai kuriuos atributus, pvz., „ perpildymas “, kuri valdo pirminių ir antrinių elementų matmenis nereikalaujant papildomų žymėjimų.
„Clearfix“ nuosavybės naudojimas
Supraskime, kaip naudoti ypatybę clearfix, kad sužinotume, ką ji daro su išvestimi, HTML kodo fragmente pridedant CSS clearfix ypatybę:
Be Clearfix nuosavybės
Paleiskite kodo fragmentą nevykdydami „clearefix“ nuosavybės, kad suprastume, kokias problemas gali išspręsti „clearfix“:
Sukurkite klasę HTML, kuri įterpia vaizdą į div konteinerį:
< div klasė = 'išvalyti' >
< br >< img klasė = 'img' src = 'image.png' viskas = 'vaizdas' plotis = '250' aukščio = '180' >
Tekstas...
< / div >
Toliau pateikiamas aukščiau nurodyto HTML CSS kodas:
.Paaiškink {
siena : 3 piks kietas #2baa12 ;
kamšalas : 5 piks ;
}
.img {
plūdė : paliko ;
}
Tai sugeneruos išvestį taip, kad antrinė klasė, kurioje yra vaizdas, bus perpildytas už konteinerio ribų. Tokiose situacijose kaip ši, aiškaus pataisymo ypatybę galima naudoti norint lengvai pašalinti arba išspręsti šią problemą:
Su Clearfix nuosavybe
Norėdami išspręsti problemą, galime tiesiog pridėti perpildymas atributas, kurio reikšmė lygi automatinis kuris pakoreguos pirminį sudėtinį rodinį pagal antrinio elemento dydį:
.Paaiškink {
siena : 3 piks kietas #2baa12 ;
kamšalas : 5 piks ;
}
.Paaiškink {
perpildymas : automatinis ;
}
.img {
plūdė : paliko ;
}
Šiame kodo fragmente pagrindinė klasė yra sudėtinis rodinys, o vaizdas įterpiamas į antrinę klasę:
< div klasė = 'išvalyti' >< br >< img klasė = 'img' src = 'image.png' viskas = 'vaizdas' plotis = '250' aukščio = '180' >
Tekstas...
< / div >
Pridėjus „clearfix“ ypatybę, pirminis elementas (sudėtinis) bus automatiškai išplėstas pagal antrinio elemento, kuris yra įterptas vaizdas, dydį:
Taip veikia „Clearfix“ ypatybė HTML.
Išvada
„Clearfix“ ypatybė naudojama koreguoti antrinius HTML elementus pagal pirminius elementus, naudojant paprastą „clearfix“ ypatybę, nereikalaujant papildomų žymėjimų. Naudojant CSS Clearfix padidinami arba sumažinami pirminių elementų matmenys, kad būtų galima pakoreguoti juos pagal antrinių elementų matmenis.