کلیئر فکس پراپرٹی کو استعمال کرنے سے پیرنٹ عنصر کو چائلڈ ایلیمنٹ کے مطابق خود بخود ایڈجسٹ کیا جا سکتا ہے اور ایچ ٹی ایم ایل کوڈ میں کچھ اوصاف کے ذریعے مسائل کو حل کیا جا سکتا ہے جیسے ' بہاؤ ” جو اضافی مارک اپ کی ضرورت کے بغیر والدین اور بچوں کے عناصر کے طول و عرض کو کنٹرول کرتا ہے۔
کلیئر فکس پراپرٹی کا استعمال
آئیے ایک HTML کوڈ کے ٹکڑوں میں سی ایس ایس کلیئر فکس پراپرٹی کو شامل کرنے سے یہ جاننے کے لیے کلیئر فکس پراپرٹی کے استعمال کو سمجھتے ہیں:
کلیئر فکس پراپرٹی کے بغیر
آئیے کلیئر فکس پراپرٹی پر عمل کیے بغیر ایک کوڈ کا ٹکڑا چلائیں تاکہ کلیئر فکس کس قسم کے مسائل کو حل کرنے کے قابل ہو:
HTML میں ایک کلاس بنائیں جو div کنٹینر میں ایک تصویر داخل کرے:
< div کلاس = 'کلیئر فکس' >
< بی آر >< img کلاس = 'img' src = 'image.png' سب کچھ = 'تصویر' چوڑائی = '250' اونچائی = '180' >
متن...
< / div >
مندرجہ بالا ایچ ٹی ایم ایل کے لیے سی ایس ایس کوڈ ہے:
انداز >
.clearfix {
سرحد : 3px ٹھوس #2baa12 ;
بھرتی : 5px ;
}
.img {
تیرنا : بائیں ;
}
اسٹائل >
یہ آؤٹ پٹ اس طرح پیدا کرے گا کہ چائلڈ کلاس جس میں امیج ہے وہ کنٹینر کے باہر بہہ جائے گی۔ اس طرح کے حالات میں، کلیئر فکس پراپرٹی کو اس مسئلے کو آسانی سے صاف کرنے یا حل کرنے کے لیے استعمال کیا جا سکتا ہے:
کلیئر فکس پراپرٹی کے ساتھ
مسئلے کو حل کرنے کے لیے، ہم صرف ایک شامل کر سکتے ہیں۔ بہاؤ کے برابر قدر کے ساتھ انتساب آٹو جو بچے کے عنصر کے سائز کے مطابق پیرنٹ کنٹینر کو ایڈجسٹ کرے گا:
انداز >.clearfix {
سرحد : 3px ٹھوس #2baa12 ;
بھرتی : 5px ;
}
.clearfix {
بہاؤ : آٹو ;
}
.img {
تیرنا : بائیں ;
}
اسٹائل >
یہاں اس کوڈ کے ٹکڑوں میں، پیرنٹ کلاس کنٹینر ہے اور تصویر کو اس کے چائلڈ کلاس میں داخل کیا گیا ہے:
< div کلاس = 'کلیئر فکس' >< بی آر >< img کلاس = 'img' src = 'image.png' سب کچھ = 'تصویر' چوڑائی = '250' اونچائی = '180' >
متن...
< / div >
کلیئر فکس پراپرٹی کو شامل کرنے سے پیرنٹ عنصر (کنٹینر) کو چائلڈ ایلیمنٹ کے سائز کے مطابق خود بخود پھیل جائے گا جو تصویر داخل کی گئی ہے:
HTML میں کلیئر فکس پراپرٹی اس طرح کام کرتی ہے۔
نتیجہ
ایک کلیئر فکس پراپرٹی کو HTML میں چائلڈ ایلیمنٹس کو پیرنٹ عناصر کے مطابق ایک سادہ کلیئر فکس پراپرٹی کے ساتھ ایڈجسٹ کرنے کے لیے استعمال کیا جاتا ہے بغیر کسی اضافی مارک اپ کی ضرورت کے۔ CSS Clearfix کا استعمال بچوں کے عناصر کے طول و عرض کے مطابق ایڈجسٹ کرنے کے لیے پیرنٹ عناصر کے طول و عرض میں اضافہ یا کمی کرتا ہے۔