ویژگی float از آن هم دسته از ویژگی هایی می باشد که مکان عنصر را مشخص می کند. آن ویژگی باعث می می شود تا عنصر به سمت چپ یا راست عنصر نگهدارنده اش هول داده می شود.

آن ویژگی می تواند مقادیر زیر را داشته باشد:

float: right;
float: left;
float: none; /* مقدار پیشفرض */
float: inherit;

زمانی که یک عنصر به سمت راست هول داده می می شود (float: right) محتوای بعد از آن هم دور لبه چپ عنصر پیچیده می شوند. و همچنین زمانی که عنصر به سمت چپ هول داده می شود (float: left) محتوای بعد از آن هم دور لبه راست عنصر جمع می می شود.

در مثال زیر عنصر تصویر در حالت پیشفرض (none) قرار دارد و همچنین متن بصورت عادی بعد از تصویر قرار گرفته می باشد:

با آن هم شرایط به تصویر ویژگی float با مقدار right را می دهیم:

ویژگی float کارایی بالایی در طراحی صفحات وب دارد. مثلا فرض کنید گالری از تصاویر دارید که هر تصویر یک متن توضیح نیز دارد. html آن هم بصورت زیر خواهد بود:

<div class="gallery-container">
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
<figure>
<img src="my-image.png" alt="Alt text">
<figcaption>
image caption
</figcaption>
</figure>
</div>

زیرا و به درستی که عنصر <figure> از نوع عناصر بلاک می باشد پس اجازه نمی دهد تا عناصر بعد از آن هم در کنار آن هم قرار بگیرند و همچنین همچنین آن عنصر کل فضای افقی محیط خود را اشغال می کند:

حتی در صورتی که به هر یک از عناصر عرض مشخص بدهیم باز هم اجازه نمی دهند تا عنصر بعدی در کنار آنها قرار بگیرد:

کافی می باشد تا به آن عناصر float داده می شود:

figure 
float: left;
margin: 10px;

زمانی که یک عنصر بلاک به یک سمت float یا آن هم شناور می می شود عرض آن هم عنصر به حداقل ممکن یعنی عرض محتوای داخل آن هم می رسد.

در مثال بعد از شناور کردن عناصر به سمت چپ عرض عناصر به مقدار و اندازه تصویر و همچنین متن داخلشان کاهش پیدا کرد.

صفحه آرایی با بهره بری و استفاده از float

قبل از آنکه ویژگی float معرفی می شود, طراحان با بهره بری و استفاده از عنصر table و همچنین اجزا آن هم عناصر صفحه را در کنار هم می چیدند یا به اصطلاح صفحه آرایی می کردند. که کار جالبی نبود چرا که عنصر table جهت ساخت جدول می باشد نه صفحه آرایی.

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

در واقع ویژگی float نیز جهت صفحه آرایی معرفی نشده می باشد بلکه همانطور که اول مطلب گفته شد کار اصلی آن هم آن می باشد که محتوای بعد از آن هم دور عنصر جمع می شود. یعنی آن هم نوعی حالت که در مجلات و همچنین روزنامه ها وجود دارد:

به همین دلیل بعدا مفاهیم که هدف اصلی آنها صفحه آرایی بود معرفی شدند. مفاهیمی مثل Flexbox و همچنین Grid و همچنین Multi-Column. ولی باید توجه داشت بایستی و حتما توجه داشته باشید که پشتیبانی مرورگرها در حال حاضر در مورد آن روش ها در اوضاع جالبی نیست. ولی باید توجه داشت در بعدی نزدیک کاملا قابل بهره بری و استفاده خواهند بود.

پشتیبانی نرم افزار مرورگر اینترنتی ها

ویژگی float در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, آندروید و همچنین iOS پشتیبانی می می شود.