ویژگی float در CSS : آموزش خاصیت float در CSS + کاربردها

شغل:طراحی وب

درآمد:۱۳۰ هزار دلار سالانه

مکان:هر کشوری دوست داری

مسیر: ۷ دوره آموزشی

منتور ۲ :جلسه آنلاین با استاد

منتور ۱ : کافه گپ و گفت

بزن بریم

در این مطلب از طراحی سایت با html و css می خواهیم به معرفی ویژگی float در CSS بپردازیم. برخی تگ ها در html به صورت اینلاینی و برخی بلاکی هستند. شما به کمک خاصیت float می توانید عناصر صفحات وب خود را هر طور که مابلید، چیدمان کنید. بنابراین لازم است که با کاربرد و نحوه کدنویسی ویژگی float در CSS آشنا شوید. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این موضوع پیدا کنید.

آنچه در این مقاله می آموزید:

ویژگی float در CSS چیست؟

با استفاده از ویژگی float در CSS می توان یک عنصر را به راست یا چپ حرکت داد. در این صورت محتوایی که در زیر عنصر (عنصری که صفت float روی آن اعمال شده است) قرار دارد به سمت بالا حرکت کرده و در کنار عنصر مورد نظر قرار می گیرد. در واقع عناصر HTML به صورت عادی از بالای مرورگر تا پایین آن به صورت یک پشته زیر هم قرار می گیرند. برای مثال یک هدینگ در بالای صفحه، سپس یک پاراگراف در زیر آن و …. اما گاهی اوقات برای زیبایی بیشتر نیاز است بعضی از عناصر در کنار هم قرار گیرند.

با استفاده از ویژگی float در CSS می توان یک عنصر را به راست یا چپ حرکت داد. صفت float برای شرایطی که بخواهیم متون در کنار تصاویر قرار بگیرد بسیار ایده آل است (مثل تصاویر در روزنامه). همچنین از صفت clear برای کنترل رفتار عناصری که روی آنها float اعمال شده است استفاده می شود.

کاربرد ویژگی float در CSS

همانطور که می‌دانید عناصری که در دسته inline-level وجود دارند، به صورت پیش فرض می‌ توانند در کنار هم قرار گیرند. به عنوان مثال اگر شما چند تگ a یا تگ span را پشت هم بنویسید، در خروجی، همه آنها به صورت یک سطر در کنار هم نمایش داده می‌ شوند. اما اگر عناصری که در دسته block-level هستند را بخواهید در کنار هم قرار دهید، ساده‌ ترین، ابتدایی‌ ترین و پرکاربرد‌ترین روش استفاده از ویژگی float در CSS است. خاصیت float در CSS می‌ تواند عناصر HTML را در جهت خاصی شناور کند.

ویژگی 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>

نحوه کار با ویژگی float در CSS

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

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

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

figure {
  float: left;
  margin: 10px;
}

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

مثال از ویژگی float در CSS

مثال شماره ۱ : یک باکس دارید که می خواهید به کمک ویژگی float در CSS، تصویر را داخلش بسمت راست شناور کنید.

.MyImage{
 float: right;
}

مثال شماره ۲ : جلوگیری از از سرریز شدن تصویر (در مثال شماره ۱ شما تصویر را شناور کردید اما اگر توجه کرده باشید عکس از باکس بیرون می زند (سرریز یا Overflow شده))

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

مثال شماره ۳ : جلوگیری از سرریز شدن ( روش دوم استفاده از ویژگی overflow)

.MyBox{
 border: 3px solid black;
 padding: 10px;
 overflow: auto;
}

مثال شماره ۴ : یک گالری تصویر ساده + واکنش گرایی ( تصاویر در حالت عادی برای اینکه کنار همدیگر قرار گیرند، بسمت چپ شناور می شون. در حالیکه وقتی اندازه صفحه کمتر از ۵۰۰ پیکسل باشد، همگی زیرهم قرار می گیرند(واکنش گرایی)

div.myimg {
 float: left;
 width: 33.33%;
 padding: 5px;
}

مثال شماره ۵ : استفاده از ویژگی clear جهت جلوگیری از شناور کردن عناصری که روی آنها ویژگی float در CSS اعمال شده است.

.Text-2{
 clear: right;
}

جدول مشخصات ویژگی float در CSS

مقدار پیش فرض	none
قابل ارث بری	ندارد
قابل متحرک سازی	ندارد
نسخه	CSS1
نحوه استفاده در جاوااسکریپت	object.style.cssFloat=”right”;

کدام مرورگرها از خاصیت float در CSS پشتیبانی می کنند؟

شکل نوشتاری ویژگی float در CSS

نحوه نوشتن یا Syntax این ویژگی float در CSS بصورت زیر می باشد:

float: none|left|right|initial|inherit;

جدول مقادیر ویژگی float در CSS

مقدار	توضیح
none	مقدار پیش فرض – تگ به هیچ سمتی شناور نمی شود
Left	تگ به سمت چپ شناور می شود
Right	تگ به سمت راست شناور می شود
initial	استفاده از مقدار پیش فرض یا اولیه
inherit	استفاده از مقدار پدر یا والد ( به ارث بری )

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

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

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

نکاتی که باید در مورد رفتار float بدانید!

چندین قانون در مورد ویژگی float در CSS وجود دارد که نحوه رفتار این ویژگی را شرح می دهد:

زمانی که یک عنصر، float می گیرد و به یک سمت شناور می شود، بیرونی ترین لبه عنصر نمی تواند از عنصر نگهدارنده اش خارج شود. (اگر عنصر margin داشته باشد، margin بیرونی ترین لبه محسوب می شود و اگر نباشد بعد از آن border منظور این قانون است)

همانطور که در تصویر بالا مشاهده می کنید عنصر دارای فاصله بیرونی 50 پیکسل از سمت چپ است (margin-left: 50px) اما آن فاصله در زمانی که عنصر به سمت چپ شناور شده است (float: left) همچنان در عنصر نگهدارنده اش حفظ شده و خارج نشده است.

وقتی یک عنصر به سمتی شناور می شود باید تا جایی که امکان دارد به سمت مورد نظر، هول داده شود. مثلا اگر به سمت چپ شناور می شود باید تا جایی که می تواند به سمت چپ عنصر نگهدارنده اش تغییر مکان دهد.
یک عنصر شناور تا جایی به سمت منظور هول داده می شود تا بیرونی ترین لبه آن، لبه عنصر نگدارنده اش یا لبه عنصر شناور دیگری را لمس کند.
فاصله بیرونی سمت راست (margin-right) یک عنصری که به سمت چپ شناور شده است در سمت راست فاصله بیرونی سمت چپ یک عنصری که به سمت راست شناور شده است و در سمت راست عنصر نیز است، قرار نمی گیرد. برای سمت چپ هم این قانون برقرار است. (منظور این قانون عدم تداخل فواصل بیرونی عناصر شناور است)
اگر عرض عنصر شناور از فضای موجودی که در اطرافش هست بیشتر شود عنصر به خط بعد سقوط می کند.
اگر یک عنصر inline را شناور کنید مهم نیست که مقدار display آن چه باشد، در هر صورت عنصر به نوع block تبدیل می شود. (البته به غیر از حالت none)
عنصر ریشه (html) نمی تواند شناور شود.
عناصری که مقدار position آنها absolute یا fixed است نمی توانند شناور شوند.
عنصر شناور از flow صفحه خارج نمی شود، این یعنی حرکت آن بر عناصر همسایه آن تاثیر می گذارد.

علاوه بر نکات و قانون های گفته شده دانستن تاثیر عناصر شناور بر رفتار نگهدارنده شان یا همان عنصر پدرشان حائز اهمیت است:

عناصر شناور تاثیری بر روی ارتفاع نگهدارنده شان نمی گذارند.
در حالت عادی عنصر ارتفاع محتوا یا فرزندانش را می گیرد (مگر اینکه ارتفاع (height) خاصی برای آن مشخص شود). اما اگر فرزندان آن شناور (float) باشند، این فرزندان تاثیری بر ارتفاع عنصر پدر نخواهند گذاشت.
فرزندان شناور تاثیری بر ارتفاع پدرشان ندارند.

ویژگی Clear در CSS

بعد از اعمال کردن ویژگی float در CSS روی یک عنصر، عناصر بعدی آن، عنصر تغییر مکان یافته را نمی بینند و ممکن است حتی روی آن قرار بگیرند که معمولا این یک اتفاق ناخواسته تلقی می شود. برای حل این مشکل می توانیم از ویژگی clear استفاده کنیم. در حقیقت وظیفه ویژگی clear این است که از جریان دادن عناصر در کنار عنصری که شناور شده است جلوگیری کند.

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

none – اجازه ی قرار گرفتن عناصر را در هر دو طرف عنصر شناور شده (float) می دهد.
left – اجازه ی قرار گرفتن عناصر در سمت چپ عنصر شناور شده را نمی دهد.
Right – اجازه ی قرار گرفتن عناصر در سمت راست عنصر شناور شده را نمی دهد.
both – اجازه ی قرار گرفتن عناصر در سمت چپ و راست عنصر شناور شده را نمی دهد.

متعارف ترین نوع استفاده از ویژگی clear بعد از به کار بردن ویژگی float روی یک عنصرمی باشد.

کلاس clearfix چیست و چیکار می‌ کند؟

همانطور که گفتیم برای مشکل ویژگی float در CSS راه حلی ارائه شد بنام کلاس clearfix. برای استفاده از این کلاس کافیست کد زیر را در قسمت CSS صفحه وب خود قرار دهید (فرقی نمی‌کند کدهای CSS شما Internal باشد یا External):

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

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

حال کد بالا را می‌توان اینگونه نوشت:

<div style="background:pink; padding:10px;" class="clearfix">
<img src="https://adminesite.com/wp-content/uploads/2020/06/css-floats-300x206.png" alt="CSS floats" style="float:right; margin-left:10px;">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
</div>

همانطور که می‌بینید بجای استفاده از ویژگی overflow در عنصر div پدر، از کلاس clearfix استفاده شده است.

سخن پایانی

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

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

اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.