Izmantojot rekvizītu Clearfix, var automātiski pielāgot vecāku elementu atbilstoši pakārtotajam elementam un novērst problēmas HTML kodā, izmantojot dažus atribūtus, piemēram, ' pārplūde ”, kas kontrolē vecāku un pakārtoto elementu izmērus, neprasot papildu atzīmes.
Clearfix īpašuma izmantošana
Izpratīsim rekvizīta clearfix izmantošanu, lai uzzinātu, ko tas dara ar izvadi, pievienojot HTML koda fragmentam CSS clearfix rekvizītu:
Bez Clearfix rekvizīta
Izpildīsim koda fragmentu, neizpildot rekvizītu clearfix, lai saprastu, kādas problēmas var atrisināt, izmantojot clearfix.
Izveidojiet klasi HTML, kas ievieto attēlu div konteinerā:
< div klasē = 'noskaidrot' >
< br >< img klasē = 'img' src = 'image.png' viss = 'attēls' platums = '250' augstums = '180' >
Teksts...
< / div >
Šis ir CSS kods iepriekšminētajam HTML:
.noskaidrot {
robeža : 3 pikseļi ciets #2baa12 ;
polsterējums : 5 pikseļi ;
}
.img {
peldēt : pa kreisi ;
}
>
Tas ģenerēs izvadi tā, ka pakārtotā klase, kurā ir attēls, pārplūdīs ārpus konteinera. Šādās situācijās skaidra labojuma rekvizītu var izmantot, lai viegli notīrītu vai novērstu šo problēmu.
Ar Clearfix īpašumu
Lai atrisinātu problēmu, mēs varam vienkārši pievienot pārplūde atribūts ar vērtību, kas vienāda ar auto kas pielāgos vecāku konteineru atbilstoši pakārtotā elementa lielumam:
.noskaidrot {
robeža : 3 pikseļi ciets #2baa12 ;
polsterējums : 5 pikseļi ;
}
.noskaidrot {
pārplūde : auto ;
}
.img {
peldēt : pa kreisi ;
}
>
Šajā koda fragmentā vecākklase ir konteiners, un attēls tiek ievietots tās pakārtotajā klasē:
< div klasē = 'noskaidrot' >< br >< img klasē = 'img' src = 'image.png' viss = 'attēls' platums = '250' augstums = '180' >
Teksts...
< / div >
Pievienojot rekvizītu clearfix, vecākais elements (konteiners) tiks automātiski izvērsts atbilstoši ievietotā attēla pakārtotā elementa izmēram:
Šādi darbojas Clearfix rekvizīts HTML.
Secinājums
Clearfix rekvizīts tiek izmantots, lai pielāgotu HTML pakārtotos elementus atbilstoši vecāku elementiem ar vienkāršu clearfix rekvizītu, neprasot papildu marķējumus. Izmantojot CSS Clearfix, tiek palielināti vai samazināti vecāku elementu izmēri, lai pielāgotu tos atbilstoši pakārtoto elementu izmēriem.