🔹 Float چیه؟

در CSS خاصیت float برای تعیین موقعیت عناصر به کار میره.
باهاش می‌تونی یک المان رو به سمت چپ یا راست ببری و محتوای بعدی اطرافش قرار بگیره.

Tailwind کلاس‌های آماده برای float داره.

🔹 کلاس‌های Float در Tailwind

• float-right → المان به سمت راست شناور میشه

• float-left → المان به سمت چپ شناور میشه

• float-none → بدون float (حالت پیش‌فرض)

🔹 مثال ساده (float-right و float-left)

<div class="bg-gray-200 p-4">
  <img src="https://via.placeholder.com/100" class="float-right ml-4 mb-4">
  <p>
    این یک متن نمونه است که کنار تصویر قرار می‌گیره.
    وقتی از float-right استفاده می‌کنیم، متن سمت چپ تصویر جریان پیدا می‌کنه.
  </p>
</div>

📌 تصویر سمت راست قرار می‌گیره و متن دورش می‌پیچه.

🔹 مثال (float-left)

<div class="bg-gray-200 p-4">
  <img src="https://via.placeholder.com/100" class="float-left mr-4 mb-4">
  <p>
    این متن نمونه هم کنار تصویر میاد.
    این بار چون float-left زدیم، تصویر سمت چپ میره و متن سمت راستش قرار می‌گیره.
  </p>
</div>

🔹 حذف Float با Clearfix

اگه یک کانتینر فقط شامل عناصر float باشه، ممکنه ارتفاعش صفر بشه.
برای رفع این مشکل، Tailwind کلاس clearfix داره.

مثال:

<div class="bg-blue-100 clearfix p-4">
  <div class="float-left bg-blue-300 p-2">Box 1</div>
  <div class="float-right bg-green-300 p-2">Box 2</div>
</div>

📌 با clearfix کانتینر ارتفاع درست می‌گیره و بچه‌ها رو شامل میشه.

🔹 نکته مهم

• امروزه برای layout کمتر از float استفاده میشه (چون Flex و Grid قدرتمندتر هستن).

• ولی هنوز برای تصاویر داخل متن، بنرها و بلاگ‌ها خیلی کاربرد داره.

• همیشه برای رفع مشکلات ارتفاع والد از clearfix استفاده کن.