ویژگی float در زبان css و html-[جلسه اول]

ویژگی 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, یا همان شناور می شود عرض آن عنصر به حداقل ممکن یعنی عرض محتوای داخل آن می رسد.

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