float

ویژگی 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 استفاده کنیم.