float
ویژگی float
تعیین میکنه یک عنصر در چه جهتی درون کانتینر خودش شناور بشه و سایر عناصر چطور اطرافش قرار بگیرن.
1️⃣ مقادیر float
✅ none
(پیشفرض)
عنصر طبق جریان عادی صفحه نمایش داده میشه.
✅ left
عنصر به سمت چپ میچسبه و سایر محتواها در سمت راستش قرار میگیرن.
✅ right
عنصر به سمت راست میچسبه و سایر محتواها در سمت چپش قرار میگیرن.
2️⃣ مثال ساده
📌 در این حالت، Box1 سمت چپ و Box2 سمت راست میره و متن اطرافشون جریان پیدا میکنه.
3️⃣ مشکل float و راهحل با clear
مشکل رایج float
اینه که کانتینر والد (parent) ارتفاع بچههای شناور رو در نظر نمیگیره.
🔧 راهحل: استفاده از ویژگی clear یا تکنیک clearfix.
✅ clear
این باعث میشه متن بعد از باکسهای شناور، از زیرشون شروع بشه.
✅ clearfix (راه استانداردتر)
4️⃣ نکتههای مهم
-
قبل از Flexbox و Grid، بیشتر برای طراحی صفحات وب از float استفاده میشد.
-
الان استفاده اصلی float بیشتر برای قرار دادن عکس کنار متن هست.
-
برای طراحیهای مدرن بهتره بیشتر از flex یا grid استفاده کنیم.