Clearfix-ominaisuuden käyttäminen voi automaattisesti säätää yläelementin alielementin mukaan ja korjata HTML-koodin ongelmat joidenkin määritteiden, kuten ' ylivuoto ', joka hallitsee ylä- ja alaelementtien mitat ilman lisämerkintöjä.
Clearfix-ominaisuuden käyttö
Ymmärretään clearfix-ominaisuuden käyttö, jotta tiedämme, mitä se tekee ulostulolle lisäämällä CSS-selvitysominaisuuden HTML-koodinpätkään:
Ilman Clearfix-ominaisuutta
Suoritetaan koodinpätkä suorittamatta clearfix-ominaisuutta, jotta ymmärrämme, millaisia ongelmia clearfix pystyy ratkaisemaan:
Luo HTML:ssä luokka, joka lisää kuvan div-säilöön:
< div luokkaa = 'selvitys' >
< br >< img luokkaa = 'img' src = 'image.png' kaikki = 'kuva' leveys = '250' korkeus = '180' >
Teksti...
< / div >
Seuraava on yllä olevan HTML-koodin CSS-koodi:
.clearfix {
rajaa : 3px kiinteä #2baa12 ;
pehmuste : 5px ;
}
.img {
kellua : vasemmalle ;
}
>
Tämä luo tulosteen siten, että kuvan sisältävä aliluokka vuotaa yli säilön ulkopuolelle. Tällaisissa tilanteissa Clear fix -ominaisuutta voidaan käyttää tämän ongelman poistamiseen tai korjaamiseen helposti:
Clearfix-ominaisuuden kanssa
Voit korjata ongelman lisäämällä ylivuoto attribuutti, jonka arvo on yhtä suuri kuin auto joka säätää ylätason säilön alielementin koon mukaan:
.clearfix {
rajaa : 3px kiinteä #2baa12 ;
pehmuste : 5px ;
}
.clearfix {
ylivuoto : auto ;
}
.img {
kellua : vasemmalle ;
}
>
Tässä koodinpätkässä yläluokka on säilö ja kuva lisätään sen aliluokkaan:
< div luokkaa = 'selvitys' >< br >< img luokkaa = 'img' src = 'image.png' kaikki = 'kuva' leveys = '250' korkeus = '180' >
Teksti...
< / div >
Clearfix-ominaisuuden lisääminen laajentaa automaattisesti pääelementin (säilön) sen alielementin koon mukaan, joka on lisätty kuva:
Näin Clearfix-ominaisuus toimii HTML:ssä.
Johtopäätös
Clearfix-ominaisuutta käytetään säätämään HTML:n alielementtejä pääelementtien mukaan yksinkertaisella clearfix-ominaisuudella ilman lisämerkintöjä. CSS Clearfixin käyttäminen lisää tai pienentää pääelementtien mittoja säätääkseen niitä alatason elementtien mittojen mukaan.