cssblog.ir logo
P

float

شناوری عناصر (قراردادن دو div در کنار هم)

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

همه چیز درباره float (شناور بودن عناصر) در CSS

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

اگر بگویم که یکی از عوامل جدایی و گاها تنفر برخی از افراد از CSS همین مشخصه float می باشد، اغراق نکرده‌ام. در برخی مواقع، developer هایی (از جمله خودم در سالهای دور) در کار با این مشخصه به مشکل خورده‌اند و بعد از مدتها درگیری با آن قسمت، یا مشکل خود را به نحوی که خود متوجه علت آن نبوده‌اند، حل کرده‌اند یا هم صورت مسئله را تغییر داده و یا کلا روش دیگری را انتخاب نموده اند. خب باید به خدمت شما بگویم که اصلا این قضیه آنقدرها هم که بنظر می‌رسد پیچیده نبوده و کلید ماجرا در دانستن چند نکته درباره float نهفته است. که در ادامه به آنها خواهم پرداخت. 

float اصلا چگونه کار می کند؟

فرض: برای توضیح بهتر از اصطلاحی کاملا مَن درآوُردی استفاده خواهم نمود که به آن جاذبه می‌گویم. همانطور که کلیه اشیاء روی کره زمین میل به حرکت به سمت پایین (جهت جاذبه) را دارند، بیایید در اینجا، ما هم اینگونه فرض کنیم که عناصر داخل صفحه وب هم در حالت عادی میل به حرکت به سمت پایین صفحه را دارند. 

در حالت عادی و معمول، عناصر صفحات وب به همان ترتیبی که در HTML آمده اند (DOM) پشت سر هم و به ترتیب و در حالت پشته ای (stack) روی هم چیده می‌شوند. انگار که کششی به سمت پایین صفحه وجود دارد (جاذبه) 

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

این مشخه بغیر از مقدارهای پیشفرض و بدون شناوری (no-float) ، دو مقدار اصلی را قبول می کند. یکی مقدارright و دیگریleft. همانطور که از این مقادیر پیداست آنها نمایانگر جهت هستند.

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

نمایش رفتار float سمت چپ

تفاوت مقادیر right و left برای در float

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

برای مثال فرض کنید دو عنصری که هر کدام ۱۰۰ پیکسل عرض دارند و فضایی که در آن قرار دارند ۸۰۰ پیکسل عرض دارد. اگر به این ۲ عنصر float چپ داده شود، این دو عنصر به سمت چپ آن فضا رفته و در کنار هم قرار می گیرند و در سمت راست آنها ۶۰۰ پیکسل فضا باقی می ماند. حال اگر float راست به آنها داده شود، آنها در سمت راست قرار می گیرند و در سمت چپ آنها ۶۰۰ پیکسل فضای خالی قرار خواهد داشت. 

float left and right

پیامدهای پس از دادن float به عناصر

شناور شدن عناصر معمولا رفتارهای زیر را در پی خواهد داشت :‌

با شناور شدن عنصر، دیگر خاصیت بلوکی بودن (BLOCK) آن از بین می رود و دیگر عناصری که در زیر آن وجود دارد را به پایین هُل نمی دهد! 

image float

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

برای قرار دادن چند عنصر در کنار هم می توان به آنها float داد تا زمانیکه فضای کافی برای آنها وجود داشته باشد، آنها کنار یکدیگر قرار خواهند گرفت. 

floated inline items

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

floated item width

درباره نیاز به clear بعد از float

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

float clearfix need

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

div {
	clear: both;
}

همانطور که مشاهده می کنیدclear با مقدارboth به این عنصر داده شده است. به زبان ساده، این مشخصه باعث می شود که در آن نقطه مجددا جاذبه به حالت عادی برگردد و از آن نقطه به بعد مجددا عناصر رفتار عادی خود را خواهند داشت انگار که اصلا هیچ اتفاقی نیافتاده است. 

CSS Clear

هک clearfix چیست؟

clearfixیک راه حل بسیار پرکاربرد است که برای حل مشکل ذکر شده در قسمت قبل از آن استفاده می شود.در این روش با استفاده از :before و :after عناصر و دادن همان مشخصه های ذکر شده در قسمت قبلی به آنها، کلاسی مانند کلاس زیر نوشته می شود که کاربرد آن حذف آن تگ اضافه clear کننده، پس از عناصر شناور،‌ می‌باشد.

.clearfix:before, .clearfix:after {
	content: ' ';
	clear: both;
	display: block;
}

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

<div class="clearfix">
	<div class="float-left"></div>
	<div class="float-left"></div>
</div>

در فریم ورک Bootstrap کلاسی بنام row وجود دارد که این :before و :after کلاس همین کار clearfix را انجام می دهند. 

امیدوارم که با ارائه این توضیحات در درک بهتر نحوه عملکرد float به شما کمک کرده باشم.

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند