خدعة clearfix

هذا أمر سيء يمكن أن يحصل عند استخدام خاصية float:

img {
  float: right;
}

<div>

أوه لا ... هذه الصورة أطول من العنصر الذي يحتوي عليها. ومع أنها تحتوي على خاصية float؛ إلا أنها تجاوزت حدود العنصر الذي يحتوي عليها!.

حسنًا. هناك طريقة بالطبع لحل ذلك. لكنه حل بشع!. يُسمى هذا الحل ب clearfix خدعة.

لنجرب إضافة هذا الكود:

.clearfix {
  overflow: auto;
}

لنر الآن ماذا سيحدث:

<div class="clearfix">

أفضل بكثير!

هذا الحل يعمل فقط في المتصفحات الحديثة. إذا كنت تريد أن تدعم المتصفحات القديمة مثل إنترنت إكسبلورر 6 لهذا الحل؛ قم بالآتي:

.clearfix {
  overflow: auto;
  zoom: 1;
}

هناك متصفحات قليلة لا تدعم الطريقة بشكل جيد، وتتطلب منك الانتباه. عالم هذه الخدعة مخيف حقًا، لكن هذا الحل البسيط فعّال مع غالبية المتصفحات الشهيرة.