ویژگی float در CSS

ویژگی float در CSS برای قرار دادن عناصر در کناره‌های صفحه یا والد خود (چپ یا راست) استفاده می‌شود، به‌گونه‌ای که متن یا عناصر دیگر بتوانند دور آن جریان پیدا کنند.

این ویژگی بیشتر برای ساخت لایه‌بندی‌های ساده، نمایش تصویر در کنار متن، یا ایجاد ستون‌های کناری (sidebar) کاربرد دارد.

دستور کلی

element {
  float: left | right | none | inline-start | inline-end;
}

مقادیر رایج float

۱. float: left

عنصر را به سمت چپ می‌چسباند و عناصر بعدی (در صورت امکان) در کنار آن قرار می‌گیرند.

img {
  float: left;
  margin-right: 10px;
}

۲. float: right

عنصر را به سمت راست می‌برد.

img {
  float: right;
  margin-left: 10px;
}

۳. float: none

مقدار پیش‌فرض. یعنی هیچ چسبیدنی در کار نیست و عنصر در جریان معمول صفحه باقی می‌ماند.

۴. float: inline-start و inline-end

این مقادیر وابسته به جهت نوشتار (LTR یا RTL) هستند. کمتر رایج‌اند ولی در طراحی‌های چندزبانه می‌توانند مفید باشند.

تأثیر float بر جریان صفحه

وقتی عنصری را float می‌دهید، از جریان معمول سند (normal flow) خارج می‌شود. این یعنی سایر عناصر بلاکی ممکن است زیر آن بیفتند و رفتار غیرمنتظره‌ای ایجاد شود.

مشکل رایج: فروپاشی والد

اگر همهٔ عناصر داخلی یک container شناور (float) باشند، والد آن ارتفاع خود را از دست می‌دهد. این پدیده را «فروپاشی ارتفاع والد» یا Collapse می‌نامند.

راه‌حل: استفاده از clearfix

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="container clearfix">
  <div class="box" style="float: left;">Box 1</div>
  <div class="box" style="float: left;">Box 2</div>
</div>

ویژگی مرتبط: clear

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

.footer {
  clear: both;
}

مقادیر: left | right | both | none

کاربردهای کلاسیک float

چسباندن عکس به کنار متن (مثلاً در مقاله‌ها)
ساخت دو ستون ساده با float: left و درصدهای عرض
ایجاد منوهای افقی (قبل از پیدایش Flexbox)
چینش عناصر در قالب‌بندی‌های قدیمی

چرا float دیگر توصیه نمی‌شود؟

با معرفی Flexbox و CSS Grid، استفاده از float برای طراحی لایه‌ها دیگر روش ایده‌آلی نیست. اکنون float بیشتر برای کاربردهای خاص مانند چسباندن عکس در متن استفاده می‌شود.

تمرین‌ها

تمرین ۱: عکس در کنار متن

یک تصویر با float: left طراحی کنید و متن را طوری تنظیم کنید که دور آن جریان پیدا کند.

تمرین ۲: دو ستون با float

دو div بسازید که با استفاده از float در کنار هم قرار گیرند. هر کدام ۵۰٪ عرض داشته باشند.

تمرین ۳: استفاده از clearfix

یک container طراحی کنید که فرزندان آن float داشته باشند و با استفاده از clearfix از فروپاشی جلوگیری کنید.

تمرین ۴: جلوگیری از کنار رفتن عنصر

عنصری قرار دهید که زیر همه عناصر float قرار گیرد و از clear: both استفاده کنید.

نکات مهم

عنصر float فضای خود را حفظ نمی‌کند؛ باعث می‌شود عناصر بعدی زیر آن بروند.
استفاده از overflow: hidden روی عنصر والد نیز می‌تواند جایگزین clearfix شود (البته با احتیاط).
float می‌تواند باعث رفتارهای غیرمنتظره شود، مخصوصاً در طراحی‌های ریسپانسیو.

جمع‌بندی

ویژگی float روزگاری یکی از ابزارهای اصلی طراحی وب بود، اما امروزه بیشتر برای کاربردهای خاص استفاده می‌شود. یادگیری آن به درک بهتر جریان صفحه و رفتار عناصر کمک می‌کند، ولی در طراحی‌های مدرن بهتر است از Flexbox و Grid استفاده شود.

مطالعه بیشتر