Clearfix ప్రాపర్టీని ఉపయోగించడం వలన పిల్లల మూలకం ప్రకారం పేరెంట్ ఎలిమెంట్‌ని స్వయంచాలకంగా సర్దుబాటు చేయవచ్చు మరియు HTML కోడ్‌లోని సమస్యలను కొన్ని లక్షణాల ద్వారా పరిష్కరించవచ్చు పొంగిపొర్లుతున్నాయి ”అది అదనపు మార్కప్‌లు అవసరం లేకుండా పేరెంట్ మరియు చైల్డ్ ఎలిమెంట్స్ యొక్క కొలతలను నియంత్రిస్తుంది.
Clearfix ఆస్తి ఉపయోగం
HTML కోడ్ స్నిప్పెట్‌లో CSS క్లియర్‌ఫిక్స్ ప్రాపర్టీని జోడించడం ద్వారా అవుట్‌పుట్‌కి అది ఏమి చేస్తుందో తెలుసుకోవడానికి క్లియర్‌ఫిక్స్ ప్రాపర్టీ యొక్క ఉపయోగాన్ని అర్థం చేసుకుందాం:
క్లియర్‌ఫిక్స్ ప్రాపర్టీ లేకుండా
క్లియర్‌ఫిక్స్ ఎలాంటి సమస్యలను పరిష్కరించగలదో అర్థం చేసుకోవడానికి క్లియర్‌ఫిక్స్ ప్రాపర్టీని అమలు చేయకుండా కోడ్ స్నిప్పెట్‌ను అమలు చేద్దాం:
div కంటైనర్‌లో చిత్రాన్ని చొప్పించే HTMLలో తరగతిని సృష్టించండి:
< div తరగతి = 'క్లియర్ ఫిక్స్' >
< br >< img తరగతి = 'img' src = 'image.png' ప్రతిదీ = 'చిత్రం' వెడల్పు = '250' ఎత్తు = '180' >
వచనం...
< / div >
పై HTML కోసం CSS కోడ్ క్రింది విధంగా ఉంది:
<శైలి >
.clearfix {
సరిహద్దు : 3px ఘనమైన #2baa12 ;
పాడింగ్ : 5px ;
}
.img {
తేలుతుంది : వదిలేశారు ;
}
>
ఇది చిత్రాన్ని కలిగి ఉన్న చైల్డ్ క్లాస్ కంటైనర్ వెలుపల ఓవర్‌ఫ్లో అయ్యే విధంగా అవుట్‌పుట్‌ను రూపొందిస్తుంది. ఇలాంటి పరిస్థితుల్లో, ఈ సమస్యను సులభంగా క్లియర్ చేయడానికి లేదా పరిష్కరించడానికి క్లియర్ ఫిక్స్ ప్రాపర్టీని ఉపయోగించవచ్చు:
క్లియర్‌ఫిక్స్ ప్రాపర్టీతో
సమస్యను పరిష్కరించడానికి, మేము కేవలం ఒక జోడించవచ్చు పొంగిపొర్లుతున్నాయి విలువతో సమానమైన లక్షణం దానంతట అదే ఇది పిల్లల మూలకం పరిమాణం ప్రకారం పేరెంట్ కంటైనర్‌ను సర్దుబాటు చేస్తుంది:
<శైలి >.clearfix {
సరిహద్దు : 3px ఘనమైన #2baa12 ;
పాడింగ్ : 5px ;
}
.clearfix {
పొంగిపొర్లుతున్నాయి : దానంతట అదే ;
}
.img {
తేలుతుంది : వదిలేశారు ;
}
>
ఇక్కడ ఈ కోడ్ స్నిప్పెట్‌లో, పేరెంట్ క్లాస్ అనేది కంటైనర్ మరియు ఇమేజ్ దాని చైల్డ్ క్లాస్‌లో చొప్పించబడింది:
< div తరగతి = 'క్లియర్ ఫిక్స్' >< br >< img తరగతి = 'img' src = 'image.png' ప్రతిదీ = 'చిత్రం' వెడల్పు = '250' ఎత్తు = '180' >
వచనం...
< / div >
క్లియర్‌ఫిక్స్ ప్రాపర్టీని జోడించడం వలన చైల్డ్ ఎలిమెంట్ పరిమాణానికి అనుగుణంగా పేరెంట్ ఎలిమెంట్ (కంటైనర్) ఆటోమేటిక్‌గా విస్తరిస్తుంది:
HTMLలోని క్లియర్‌ఫిక్స్ ప్రాపర్టీ ఈ విధంగా పనిచేస్తుంది.
ముగింపు
అదనపు మార్కప్‌లు అవసరం లేకుండా సాధారణ క్లియర్‌ఫిక్స్ ప్రాపర్టీతో పేరెంట్ ఎలిమెంట్‌ల ప్రకారం HTMLలోని చైల్డ్ ఎలిమెంట్‌లను సర్దుబాటు చేయడానికి క్లియర్‌ఫిక్స్ ప్రాపర్టీ ఉపయోగించబడుతుంది. CSS Clearfixని ఉపయోగించడం వలన చైల్డ్ ఎలిమెంట్స్ యొక్క కొలతలు ప్రకారం వాటిని సర్దుబాటు చేయడానికి పేరెంట్ ఎలిమెంట్‌ల కొలతలు పెరుగుతాయి లేదా తగ్గుతాయి.