🔹 Clear چیه؟

وقتی از float برای یک المان استفاده می‌کنیم، المان‌های بعدی ممکنه دور اون بچرخن و درست زیرش قرار نگیرن.
اینجاست که خاصیت clear به کار میاد.

Clear مشخص می‌کنه که یک المان نباید کنار المان‌های شناور (float) قرار بگیره و باید زیر اون‌ها شروع بشه.

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

• clear-left → المان از زیر float سمت چپ شروع میشه.

• clear-right → المان از زیر float سمت راست شروع میشه.

• clear-both → المان از زیر هر دو طرف (چپ و راست) شروع میشه.

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

🔹 مثال (بدون clear)

<div class="bg-gray-200 p-4">
  <img src="https://via.placeholder.com/100" class="float-left mr-4">
  <p class="bg-blue-200">
    این متن کنار تصویر میاد چون clear نداره.
  </p>
</div>

📌 متن کنار تصویر قرار گرفته چون float فعال هست.

🔹 مثال (با clear-both)

<div class="bg-gray-200 p-4">
  <img src="https://via.placeholder.com/100" class="float-left mr-4">
  <p class="clear-both bg-green-200">
    این متن به خاطر clear-both زیر تصویر میاد.
  </p>
</div>

📌 این بار متن زیر تصویر شروع میشه.

🔹 مثال (clear-left و clear-right)

<div class="bg-gray-100 p-4">
  <img src="https://via.placeholder.com/80" class="float-left mr-4">
  <img src="https://via.placeholder.com/80" class="float-right ml-4">
  
  <p class="clear-left bg-yellow-200">Clear Left → این متن زیر تصویر سمت چپ شروع میشه.</p>
  <p class="clear-right bg-pink-200">Clear Right → این متن زیر تصویر سمت راست شروع میشه.</p>
  <p class="clear-both bg-purple-200">Clear Both → این متن زیر هر دو تصویر شروع میشه.</p>
</div>

🔹 نکته مهم

• clear معمولاً همراه با float استفاده میشه.

• clear-both رایج‌ترین حالتشه چون مطمئن میشه المان زیر هر دو طرف قرار می‌گیره.

• اگه فقط بخوای جلوی float یک سمت رو بگیری، از clear-left یا clear-right استفاده کن.