يمكن أن يؤدي استخدام خاصية Clearfix إلى ضبط العنصر الأصل تلقائيًا وفقًا للعنصر الفرعي وإصلاح المشكلات في كود HTML من خلال بعض السمات مثل ' تجاوز 'يتحكم في أبعاد العناصر الرئيسية والفرعية دون الحاجة إلى ترميز إضافي.
استخدام خاصية Clearfix
دعنا نفهم استخدام خاصية clearfix لمعرفة ما تفعله للمخرجات عن طريق إضافة خاصية clearfix CSS في مقتطف شفرة HTML:
بدون خاصية Clearfix
لنقم بتشغيل مقتطف الشفرة دون تنفيذ خاصية clearfix لفهم نوع المشكلات التي يمكن لـ clearfix حلها:
أنشئ فئة بتنسيق HTML تُدخل صورة في حاوية div:
< شعبة فصل = 'clearfix' >
< ر > < IMG فصل = 'img' src = 'image.png' كل شئ = 'صورة' عرض = '250' ارتفاع = '180' >
نص...
< / شعبة >
فيما يلي رمز CSS لـ HTML أعلاه:
<النمط >
.clearfix {
حدود : 3 بكسل صلب #2baa12 ؛
حشوة : 5 بكسل ؛
}
.img {
يطفو : غادر ؛
}
>
سيؤدي هذا إلى إنشاء الإخراج بطريقة تتدفق فيها الفئة الفرعية التي تحتوي على الصورة خارج الحاوية. في مثل هذه الحالات ، يمكن استخدام خاصية clear fix لمسح هذه المشكلة أو إصلاحها بسهولة:
مع خاصية Clearfix
لإصلاح المشكلة ، يمكننا ببساطة إضافة ملف تجاوز ذات قيمة تساوي آلي من شأنها ضبط الحاوية الرئيسية وفقًا لحجم العنصر الفرعي:
<النمط >.clearfix {
حدود : 3 بكسل صلب #2baa12 ؛
حشوة : 5 بكسل ؛
}
.clearfix {
تجاوز : آلي ؛
}
.img {
يطفو : غادر ؛
}
>
هنا في مقتطف الشفرة هذا ، الفئة الأصلية هي الحاوية ويتم إدراج الصورة في صنفها الفرعي:
< شعبة فصل = 'clearfix' >< ر > < IMG فصل = 'img' src = 'image.png' كل شئ = 'صورة' عرض = '250' ارتفاع = '180' >
نص...
< / شعبة >
ستؤدي إضافة خاصية clearfix إلى توسيع العنصر الأصلي (الحاوية) تلقائيًا وفقًا لحجم العنصر الفرعي الذي تم إدخال الصورة فيه:
هذه هي الطريقة التي تعمل بها خاصية Clearfix في HTML.
خاتمة
تُستخدم خاصية clearfix لضبط العناصر الفرعية في HTML وفقًا للعناصر الأصلية بخاصية clearfix بسيطة دون الحاجة إلى علامات ترميز إضافية. يؤدي استخدام CSS Clearfix إلى زيادة أو تقليل أبعاد العناصر الأصلية لتعديلها وفقًا لأبعاد العناصر الفرعية.