در باره این سایت

در اینجا اتفاق بدی که گاهی به هنگام استفاده از float ممکن است بیوفتد را می‌بینید:

img {
  float: right;
}

<div>

این عکس بزرگتر از عنصر در بر گیرنده ی آن است، و همچنین عکس float است، به همین دلیل از عنصر در بر گیرنده ی آن بیرون زده است!

بسیار عالی! یک روش برای اصلاح آن وجود دارد، البته کمی زشت است! به آن ترفند clearfix می‌گویند.

بیاید CSS جدید را امتحان کنیم:

.clearfix {
  overflow: auto;
}

حال ببینیم چه می‌شود:

<div class="clearfix">

خیلی بهتر شد!

این برای مرورگر‌های مدرن کار می‌کند. اگر می‌خواهید که IE6 را هم پشتیبانی کند، احتمالا باید این را هم اضافه کنید:

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

همچنین کلی مرورگرهای عجیب و غریب دیگری هم وجود دارند که ممکن است به توجهات ویژه نیاز داشته باشند. دنیای clearfix کمی‌ ترسناک است، اما این راه حل ساده، تقریبا در همه ی مرورگرهای اصلی کار می‌کند.