🔹 float در CSS

• برای شناورسازی المان‌ها (مثلاً متن کنار عکس).
• مقادیر مهم:
  • left → المان به چپ می‌رود.
  • right → المان به راست می‌رود.
  • none → شناورسازی لغو می‌شود.

📌 مثال:

img {
  float: right;
  margin-left: 10px;
}

🔹 مشکل float و نیاز به Clearfix

• وقتی المان‌ها float می‌شوند، المان والد (parent) ممکن است ارتفاع نگرفته و بهم‌ریختگی ایجاد شود.
• راه‌حل → استفاده از clear یا clearfix.

🔸 clear (روی المان بعدی)

• left → المان بعدی زیر المان‌های شناور سمت چپ قرار می‌گیرد.
• right → زیر المان‌های شناور سمت راست.
• both → زیر همه المان‌های شناور (چپ و راست).

🔸 کلاس clearfix (راه حرفه‌ای‌تر)

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

🔹 نکات پروژه گالری تصاویر

• هر عکس داخل .container قرار گرفته.
• برای نمایش چند عکس کنار هم:

.container {
  float: right;
  width: 33.33%;
  line-height: 0; /* حذف فاصله‌های اضافی */
}
.container img {
  width: 100%;
  display: block;
}

• برای افکت روی عکس:

.container img:hover {
  filter: grayscale(100%);
}