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

1️⃣ مقادیر float

✅ none (پیش‌فرض)

عنصر طبق جریان عادی صفحه نمایش داده می‌شه.

.box {
  float: none; /* پیش فرض */
}

✅ left

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

.box {
  float: left;
}

✅ right

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

.box {
  float: right;
}

2️⃣ مثال ساده

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <p>این یک متن نمونه است که دور باکس‌ها جریان پیدا می‌کند.</p>
</div>

.container {
  border: 2px solid #333;
}

.box1 {
  width: 100px;
  height: 100px;
  background: lightcoral;
  float: left;
}

.box2 {
  width: 100px;
  height: 100px;
  background: lightblue;
  float: right;
}

📌 در این حالت، Box1 سمت چپ و Box2 سمت راست می‌ره و متن اطرافشون جریان پیدا می‌کنه.

3️⃣ مشکل float و راه‌حل با clear

مشکل رایج float اینه که کانتینر والد (parent) ارتفاع بچه‌های شناور رو در نظر نمی‌گیره.

🔧 راه‌حل: استفاده از ویژگی clear یا تکنیک clearfix.

✅ clear

p {
  clear: both; /* یا left, right */
}

این باعث می‌شه متن بعد از باکس‌های شناور، از زیرشون شروع بشه.

✅ clearfix (راه استانداردتر)

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

4️⃣ نکته‌های مهم

• قبل از Flexbox و Grid، بیشتر برای طراحی صفحات وب از float استفاده می‌شد.

• الان استفاده اصلی float بیشتر برای قرار دادن عکس کنار متن هست.

• برای طراحی‌های مدرن بهتره بیشتر از flex یا grid استفاده کنیم.