شناورسازی (Float)

Float در CSS

Float عنصر را به چپ یا راست شناور می‌کند تا متن و سایر عناصر دور آن بپیچند. در گذشته برای چیدمان استفاده می‌شد، اما امروزه Flexbox و Grid جایگزین آن شده‌اند.

مقادیر float

مقدار	توضیح
left	شناور به چپ
right	شناور به راست
none	بدون شناور (پیش‌فرض)
inline-start	شروع خط (مدرن)
inline-end	انتهای خط (مدرن)

مثال پایه

.image-left {
        float: left;
        margin-right: 15px;
    }
    
    .image-right {
        float: right;
        margin-left: 15px;
    }

مشکل Float: والد فرو می‌پاشد!

وقتی فرزندان float دارند، والد ارتفاع آن‌ها را تشخیص نمی‌دهد:

/* ❌ والد ارتفاع صفر دارد */
    .container {
        border: 1px solid red;
        /* فرزندان float دارند → ارتفاع از دست می‌رود */
    }

راه‌حل‌های Clearfix

۱. روش کلاسیک ( clearfix hack )

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

۲. روش مدرن (overflow)

.container {
        overflow: hidden; /* یا auto */
    }

۳. روش مدرن‌تر (display: flow-root) ⭐

.container {
        display: flow-root;
    }

۴. ویژگی clear

.next-section {
        clear: both;  /* یا left یا right */
    }

کاربردهای هنوز هم مفید Float

• متن دور تصویر: مثل مجلات — متن دور تصویر می‌پیچد
• چاپ: در استایل‌های چاپ هنوز استفاده می‌شود
• ایمیل HTML: در قالب‌های ایمیل که Flexbox پشتیبانی نمی‌شود

Float در برابر Flexbox

ویژگی	Float	Flexbox
چیدمان	پیچیده و شکننده	ساده و قدرتمند
واکنش‌گرا	سخت	آسان
تراز عمودی	❌	✅
ترتیب	ثابت	قابل تغییر
متن دور تصویر	✅	❌

بهترین شیوه‌ها

• برای چیدمان از Flexbox یا Grid استفاده کنید، نه Float
• Float را فقط برای متن دور تصویر استفاده کنید
• اگر از Float استفاده کردید، حتماً clearfix یا flow-root بدهید
• برای ایمیل‌های HTML، Float هنوز بهترین گزینه است

نکات مهم

• Float عنصر را از جریان عادی نیمه‌خارج می‌کند
• تنها کاربرد مدرن Float، متن دور تصویر است
• display: flow-root بهترین راه‌حل برای مشکل clearfix است
• عناصر float فقط افقی شناور می‌شوند، نه عمودی