float در CSS چیست؟ float چطور box model را تحت تأثیر قرار می‌دهد؟ چه خصوصیاتی بر روی عناصر float شده تأثیر می‌گذارد؟ خصوصیت clear چه تأثیری بر روی float می‌گذارد؟ و… همه مواردی هستند که در این مطلب بررسی می‌کنیم.

درک float در ابتدا برای طراحان و برنامه نویسان کمی مشکل به نظر می رسد در صورتی که یادگیری رفتار این خصوصیت بسیار آسان است و می‌توان با یادگیری آن مواردی را که به نظر پیچیده به نظر می‌رسند به آسانی پیاده‌سازی نمود. حتی اگر فکر می کنید که تمام چیزها را در مورد float می‌دانید باز هم با ما همراه باشید

float چیست؟

تعدادی عناصر در CSS به صورت Block Level هستند یعنی به صورت اتوماتیک از خط جدیدی نمایش داده می‌شوند. برای مثال دو پاراگراف پشت سر هم نمایش داده نمی شوند بلکه هر یک در خط جدیدی نمایش داده می‌شوند. نوع دیگری از نمایش عناصر به نام inline وجود دارد که به صورت درون خطی نمایش داده می‌شود به عنوان مثال تگ a به صورت inline است و برای نمایش هیچ خط و فاصله اضافه‌ای را طلب نمی‌کنند.

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