CSS Float

CSS Float چیست؟

خاصیت `float` در CSS برای قرار دادن یک عنصر در سمت چپ یا راست ظرف (container) خودش استفاده می‌شود، به طوری که متن و عناصر درون‌خطی (inline) بتوانند دور آن بچرخند. معمولاً برای چینش تصاویر یا ساخت طرح‌های چندستونی قبل از ظهور Flexbox و Grid کاربرد داشته است.

—

ساختار

“`css

selector {
float: left | right | none | inherit;
}
“`

* `left` — عنصر به سمت چپ ظرف خودش شناور می‌شود.
* `right` — عنصر به سمت راست شناور می‌شود.
* `none` — پیش‌فرض است، عنصر شناور نیست.
* `inherit` — مقدار شناور بودن را از والد خودش می‌گیرد.

—

مثال

“`html

<style>
.image {
    float: left;
    margin: 0 15px 15px 0;
}
</style>

      <img src=“photo.jpg” alt=“عکس” class=“image”>
<p>این پاراگراف دور عکس که به سمت چپ شناور شده، قرار می‌گیرد.</p>

“`

—

نکات مهم

* وقتی عنصری شناور می‌شود، از جریان معمول سند خارج می‌شود و ممکن است باعث شود ظرف والد آن ارتفاعش به درستی محاسبه نشود و محتویاتش به هم بریزد.
* برای رفع این مشکل باید **شناورها را پاکسازی (clear)** کنیم:

* می‌توان روی عنصر بعدی خاصیت `clear: both;` گذاشت.
* یا از روش clearfix برای ظرف والد استفاده کرد.

—

پاکسازی شناورها (Clear Floats)

“`css
.clearfix::after {
content: “”;
display: block;
clear: both;
}
“`

و سپس کلاس `.clearfix` را روی ظرف والد اعمال می‌کنیم:

“`html
<div class=“clearfix”>
<img class=“image” src=“photo.jpg”>
<p>متن دور عکس شناور می‌چرخد.</p>
</div>
“`