Použitie vlastnosti Clearfix môže automaticky upraviť rodičovský prvok podľa podriadeného prvku a opraviť problémy v kóde HTML prostredníctvom niektorých atribútov, ako napríklad „ pretečeniu ”, ktorý riadi rozmery rodičovského a podriadeného prvku bez potreby ďalších značiek.
Použitie vlastnosti Clearfix
Poďme pochopiť použitie vlastnosti clearfix, aby sme vedeli, čo robí s výstupom pridaním vlastnosti clearfix CSS do útržku kódu HTML:
Bez vlastnosti Clearfix
Spustite útržok kódu bez spustenia vlastnosti clearfix, aby sme pochopili, aké problémy je clearfix schopný vyriešiť:
Vytvorte triedu v HTML, ktorá vloží obrázok do kontajnera div:
< div trieda = 'clearfix' >
< br < img trieda = 'img' src = 'image.png' všetko = 'obrázok' šírka = '250' výška = '180' >
Text...
< / div >
Nasleduje kód CSS pre vyššie uvedený kód HTML:
<štýl >
.clearfix {
hranica : 3px pevný #2baa12 ;
vypchávka : 5 pixelov ;
}
.img {
plavák : vľavo ;
}
>
Toto vygeneruje výstup takým spôsobom, že podradená trieda, ktorá obsahuje obrázok, pretečie mimo kontajnera. V situáciách, ako je táto, možno použiť vlastnosť clear fix na jednoduché vymazanie alebo vyriešenie tohto problému:
S vlastnosťou Clearfix
Na vyriešenie problému môžeme jednoducho pridať pretečeniu atribút s hodnotou rovnou auto ktorý prispôsobí nadradený kontajner podľa veľkosti podriadeného prvku:
<štýl >.clearfix {
hranica : 3px pevný #2baa12 ;
vypchávka : 5 pixelov ;
}
.clearfix {
pretečeniu : auto ;
}
.img {
plavák : vľavo ;
}
>
Tu v tomto útržku kódu je nadradená trieda kontajner a obrázok je vložený do svojej podradenej triedy:
< div trieda = 'clearfix' >< br < img trieda = 'img' src = 'image.png' všetko = 'obrázok' šírka = '250' výška = '180' >
Text...
< / div >
Pridaním vlastnosti clearfix sa automaticky rozšíri nadradený prvok (kontajner) podľa veľkosti podradeného prvku, ktorým je vložený obrázok:
Takto funguje vlastnosť Clearfix v HTML.
Záver
Vlastnosť clearfix sa používa na úpravu podradených prvkov v HTML podľa rodičovských prvkov s jednoduchou vlastnosťou clearfix bez potreby ďalších značiek. Použitie CSS Clearfix zväčšuje alebo zmenšuje rozmery nadradených prvkov, aby sa prispôsobili rozmerom podradených prvkov.