همه چیزی که می بایست در مورد Float در CSS بدانید!

what-is-float1

float در  CSS چیست؟ float چطور box model را تحت تأثیر قرار می‌دهد؟  چه خصوصیاتی بر روی عناصر float شده تأثیر می‌گذارد؟ خصوصیت clear چه تأثیری بر روی float می‌گذارد؟ و… همه مواردی هستند که در این مطلب بررسی می‌کنیم.

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

float چیست؟

تعدادی عناصر در CSS به صورت Block Level هستند یعنی به صورت اتوماتیک از خط جدیدی نمایش داده می‌شوند. برای مثال دو پاراگراف پشت سر هم نمایش داده نمی شوند بلکه هر یک در خط جدیدی نمایش داده می‌شوند. نوع دیگری از نمایش عناصر به نام inline وجود دارد که به صورت درون خطی نمایش داده می‌شود به عنوان مثال تگ a به صورت inline است و برای نمایش هیچ خط و فاصله اضافه‌ای را طلب نمی‌کنند.

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

مثالی کلاسیک از استفاده از float را می‌توان زمانی دانست که می خواهیم یک پاراگراف متن و تصویر را در کنار هم نمایش دهیم نه به صورت پشت سر هم. برای این مثال کد زیر را می نویسم.

<img src="http://placehold.it/200x200&amp;text=1.png" alt="Test image" />
<p>لورم ایپسوم متنی است که ...</p>

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

normal-folow-document

می‌توان این رفتار را به آسانی بوسیله کد CSS زیر تغییر داد.

img{
	float: left;
	margin: 0 20px 20px 0;
}

این کد CSS تصویر را به سمت چپ می چسباند و پاراگراف در سمت راست آن قرار می‌گیرد. تصویر زیر نحوه نمایش این کد را نمایش می دهد.

floated-image
نکته جالب در مورد این نوع استایل این است که عناصر دیگر اندازه خود را به مقدار فضای خالی وفق می‌دهند یعنی اگر اندازه تصویر را کوچکتر یا بزرگتر کنید پاراگراف به اندازه فضای خالی موجود اندازه خود را تغییر می‌دهد.

resize-floated-image

بررسی عمیق‌تر این مدل نمایش

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

p {margin: 20px;}

در صورتی که این کد حتی یک پیکسل هم فضای خالی ایجاد نمی‌کند و می‌بایست از کد زیر استفاده کنید.

img {margin: 20px;}

floated-image-with-margin

سوالی که ممکن از خودتان بپرسید این است که «چرا؟» چرا مارجین بر روی پاراگراف عمل نمی‌کند اما بر روی تصویر عمل می‌کند؟ دلیل این است که شما در مورد Box Model پاراگراف در حال اشتباه هستید. اگر می‌خواهید درک عمیقی از این مورد پیدا کنید می‌توانید یک خط دور برای پاراگراف قرار دهید.

p { border: 1px solid black;}

floated-image-with-border

همانطور که می‌بینید تصویر در درون جعبه پاراگراف قرار دارد. هر حاشیه‌ای که به سمت چپ پاراگراف نسبت داده شده باشد توسط تصویر خنثی می‌شود.

اگر می‌خواهید از قرار گرفتن و شکسته شدن پاراگراف در کنار تصویر جلوگیری کنید می‌بایست برای پاراگراف عرض نسبت دهید. عرض پاراگراف به صورت پیش فرض ۱۰۰٪ است و بدین صورت تصویر در درون جعبه پاراگراف قرار می‌گیرد اما با نسبت دادن عرض کمتری از جعبه والد پاراگراف می‌توان تصویر را از درون جعبه پاراگراف خارج کرد.

p{
	border: 1px solid black;
	width: 250px;
}
img{
	float: left;
}

p-width

بررسی قوانین موقعیت عناصر float شده

اکنون می‌دانیم که float چیست و یک عنصر float شده در کنار عناصر دیگر قرار می‌گیرد. مورد دیگری وجود دارد که درک آن در ابتدا برای برنامه نویسان کمی مشکل به نظر می‌رسد و آن قوانین حاکم بر روی عناصر float شده است.

در مواردی می‌خواهیم به عناصر یک لیست float اختصاص دهیم. به عنوان مثال یک لیست تصویری که ممکن است به عنوان گالری استفاده شود را در نظر بگیرید.

<ul>
  <li><img src="http://placehold.it/100x100&text=1"/></li>
  <li><img src="http://placehold.it/100x100&text=2"/></li>
  <li><img src="http://placehold.it/100x100&text=3"/></li>
  <li><img src="http://placehold.it/100x100&text=4"/></li>
  <li><img src="http://placehold.it/100x100&text=5"/></li>
  <li><img src="http://placehold.it/100x100&text=6"/></li>
  <li><img src="http://placehold.it/100x100&text=7"/></li>
</ul>

به صورت پیش فرض عناصر li لیست به صورت block level هستند و هر کدام در خطی جدید و در واقع کل لیست به صورت یک پشته نمایش داده می‌شود. برای تغییر این حالت می‌توان با float کردن عناصر li آنها را از حالت پشته خارج کرد. نکته‌ای قابل توجه نحوه نمایش چندین عنصر float شده در کنار یکدیگر است.

li{
	float: right;
	margin: 5px;
}

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

floated-list-items

اما در اینجا عناصر لیست ما دارای ارتفاع یکسانی نیستند. ارتفاع بعضی ار تصاویر ۱۰۰px و بعضی دیگر ۱۵۰px است در این موارد نتیجه به صورت عجیبی به نمایش در می‌آید.

floated-list-dif-height

اولین باری که با این صحنه مواجه شدم خیلی تعجب کردم! چه اتفاقی در این مدل می‌افتد؟ چرا عنصر شماره چهار در پایین عنصر شماره ۱ قرار می‌گید اما چنین اتفاقی برای ۵ نمی‌افتد و در آن موقعیت اشتباه به نمایش در می‌آید. اگر خصوصیت float عنصر li را حذف و نحوه نمایش آن را به inline تغییر دهید نتیجه کاملا متفاوت خواهد شد.

li {
  display: inline;
}

inline-list

پاکسازی float

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

floated-list

نتیجه خارج از انتظار شما خواهد  بود:

floated-list-p

برای رهایی از مشکل بالا می‌توان از خصوصیت clear استفاده کرد. این خصوصیت مقدار جهتی را دریافت می‌کند که بر اساس آن از قرار گرفتن عناصر float شده در آن جهت جلوگیری می‌کند. برای مثال اگر در لیست بخواهیم قبل از li شماره ۲  عنصر float شده‌ای باشد می‌توان clear آن را با right مقدار دهی کرد.

ul li:nth-child(2) {
  clear: left;
}

th2-floated-list

این کد به مرورگر اعلام می‌کند که قبل از عنصر مشخص شده عنصر float شده‌ای وجود نداشته باشد و آن عنصر به عنوان اولین عنصر float شده در آن خط باشد.

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

th2-floated-list-p

برای رهایی از این مشکل می‌توان خصوصیت clear پاراگراف را با both مقدار دهی کرد تا از قرار گرفتن هرگونه عنصر float در هر دو سمت چپ و راست جلوگیری کرد و در واقع پاراگراف را به صورت block level نمایش داد.

p-clear-both

خاصیت float و ارتفاع عناصر

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

ul {
  background-color: gray;
}

list-bg

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

floated-list

روش‌های مختلفی برای این مشکل وجود دارد که ساده ترین آن اختصاص ارتفاع به ul است.

ul {
	height:220px;
	background-color: gray;
}

list-bg-height

همانطور که می‌بینید با اینکار رنگ زمینه نمایان می‌شود. اما از این راه حل همیشه نمی‌توان استفاده کرد. اگر ارتفاع عناصر همیشه ثابت نباشد نمی‌توان از این راه حل استفاده کرد. در ادامه راه حل‌های بهتری را بررسی می‌کنیم.

راه حل‌های مشکل ارتفاع و clearfix

در این مواقع کلمه clearfix برای همه نجات دهنده است. clearfix در واقع یک گزینشگر کلاسی CSS است که در آن خصوصیت clear با both مقدار دهی شده و در html زمانی که می‌خواهیم از مشکل ارتفاع رهایی یابیم یک تگ (معمولا div) خالی با خصوصیت کلاس clearfix قرار می‌دهیم.

.clearfix {
    clear: both;
}

list-bg-height

این روش بدون هیچ مشکلی کار می‌کند اما در این روش همیشه یک تگ اضافی در HTML قرار می‌گیرد که منطقی نیست. راه حل جدیدتر استفاده از خصوصیت overflow برای لیست است.

ul {
    overflow: auto;
}

list-bg-height


این مقاله ترجمه‌ای آزاد از این مطلب است.

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

  1. مرتضی در

    توی این مورد خیلی گیر داشتم.

    خیلی مقاله عالی بود

    ممنون

  2. maikel در

    بسیار عالی و مفید بود ممنون از زحماتتون

  3. maryam در

    سلام ممنون از وقتی که گذاشتی .واقعا این مقاله واسه من لازم بود

  4. یو پی اس در

    با سلام
    ممنون عالی بود

  5. shadi در

    خسته نباشید آقای اقدم. به نکات خوبی اشاره کردین. فایل pdf آموزش css هم دارین برای من ارسال کنین؟

  6. armin در

    مرسییی مرسیییییییییی مرسیییییییییییییییییییییییی

  7. صالح در

    ایول. نه به خاطر مقاله ات که البت اونم خوب بود. بات حال کردم.

  8. fereshte در

    با سلام
    ممنون، مطالب مفید و خوب بود.
    امیدوارم مقاله های بیشتری از شما ببینم.
    موفق باشید.

  9. ramin در

    سلام دوست گرامی فوق العاده بود ولی مشکل منو حل نکرد.
    من چندتیکه عکس دارم که میخوام کنار هم بچینم. اندازه شون هم یکسان نیست.
    مثل این سایت:
    http://www.zanbooredana.com
    نمیدونم چکارکنم.تصاویرو اسلایس کردم ولی اونطوری که میخوام نمیشه
    ممنون میشم اگه راهنماییم کنید
    باتشکر

  10. جینان در

    مرسی که خوب یاد گرفتی و خوبتر به ما یاد دادی . خدا علم بیشتری به شما هدیه دهد . آمین

  11. عدنان در

    دمت گرم
    ایول دستت درد نکنه خوب مطالب رو جمع جور کردی

  12. محمد در

    دمت گرم خیلی توپ بود داخل این مشکل داشتم

  13. mohamad در

    سلام و دورود ۲عالم بر تو مرد بزرگ
    آقا کارت حرف نداره
    http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/
    من قبلا این پیجو دیده بودم ولی مثل الآن درک نکرده بودم و الآن واقا خوشحالم که کسایی مثل تو هستن که وقت میزارن برای همچن کارایی بدون هیییییچ چشم داشتی
    آقا کارت عاااااالیه
    امیدوارم که ادامه بدی به کارت

  14. Pingback: پارس فایل » بررسی مفهوم Float در CSS

  15. محمد حیدری در

    ممنون خیلی خیلی عالی و گیرا بود

  16. بهمن در

    زشته دیگه استفاده کنیم و تشکر نکنیم! مگه نه؟ دمت گرم داداش. بوس

  17. مصطفی در

    آقا دمت گرم مشکل یک سال منو حل کردی

  18. زهرا در

    بسیار عالی بود
    خیلی خوب توضیح دادید
    ممنون از لطفتون .

  19. ممد در

    دمت جیز …

  20. Zuhal در

    تشکر بسیار سایت عالی لست

  21. محسن در

    عالی بود.ممنون
    یا علی.

  22. tanks در

    very very good

  23. سینا در

    ممنون خیلی مفید بود

  24. علیرضا در

    دوست عزیز خیلی مفید بود ممنون .

  25. تورج امین فر در

    بسیار عالی بود تشکر

  26. سینا یزدانی در

    با سلام خدمت شما
    خیلی ممنون واسه اطلاعات مفیدتون
    موفق باشید

  27. محسن در

    عالیییییییییییییییییییی بود
    منم تشکر
    به امید موفقیت برا ی شما دوست عزیز

  28. saman در

    ajab dastani bood in float hich vaght darkesh nakardam alan taze fahmidam merc

  29. مهدی در

    عالی بود
    ممنونم

  30. میلاد در

    عالی بود!

دیدگاه خود را بنوبسید