float

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

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

 


float: right;
float: left;
float: none; /* مقدار پیشفرض */
float: inherit;

 

زمانی که یک عنصر به سمت راست هول داده می شود (float: right) محتوای بعد از آن دور لبه چپ عنصر پیچیده می شود. و زمانی که عنصر به سمت چپ هول داده شود (float: left) محتوای بعد از آن دور لبه راست عنصر جمع می شود.

در مثال زیر عنصر تصویر در حالت پیشفرض (none) قرار دارد و متن بصورت عادی بعد از تصویر قرار گرفته است:

 
مثال float
 

با همان شرایط به تصویر ویژگی float با مقدار right را می دهیم:

 
استفاده از 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> از نوع عناصر بلاک می باشد پس اجازه نمی دهد تا عناصر بعد از آن در کنار آن قرار بگیرند و همچنین این عنصر کل فضای افقی محیط خود را اشغال می کند:

 
ساخت گالری در css
 

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

 
استفاده از تگ figure
 

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

 


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

 

 
استفاده از float برای چیدن تصاویر در کنار هم

 

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

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

 

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

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

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

 
صفحه آرایی با float
 

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

 
کاربرد اصلی float
 

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

 

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

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

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

 
قوانین Float
 

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

2. وقتی یک عنصر به سمتی شناور می شود باید تا جایی که امکان دارد به سمت منظور هول داده شود. مثلا اگر به سمت چپ شناور می شود باید تا جایی که می تواند به سمت چپ عنصر نگهدارنده اش تغییر مکان دهد.

3. یک عنصر شناور تا جایی به سمت منظور هول داده می شود تا بیرونی ترین لبه آن, لبه عنصر نگدارنده اش یا لبه عنصر شناور دیگری را لمس کند.

4. فاصله بیرونی سمت راست (margin-right) یک عنصری که به سمت چپ شناور شده است در سمت راست فاصله بیرونی سمت چپ یک عنصری که به سمت راست شناور شده است و در سمت راست عنصر نیز است, قرار نمی گیرد. برای سمت چپ هم این قاونون برقرا است. (منظور این قانون عدم تداخل فواصل بیرونی عناصر شناور است)

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

6. اگر یک عنصر inline را شناور کنیم مهم نیست که مقدار display آن چه باشد, در هر صورت عنصر به نوع block تبدیل می شود.
(البته به غیر از حالت none)

7. عنصر ریشه (html) نمی تواند شناور شود.

8. عناصری که مقدار position آنها absolute یا fixed است نمی توانند شناور شوند.

9. عنصر شناور از flow صفحه خارج نمی شود, این یعنی حرکت آن بر عناصر همسایه آن تاثیر می گذارد.

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

عناصر شناور تاثیری بر روی ارتفاع نگهدارنده شان نمی گذارند.

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

 
ماجرای float و پدرش
 

 
فرزندان شناور تاثیری بر ارتفاع پدرشان ندارند
 

از این وحشتناک تر اینکه عنصر شناور روی عناصر بعدی در نگهدارنده های دیگر هم قرار می گیرد و حتی بر روی محتوای آنها تاثیر می گذارد ( متن عنصر دوم به علت وجود عنصر صورتی رنگ که شناور است به جلو حرکت کرده است):

 
اتفاع وحشتناک در مورد float
 

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

برای جلوگیری از این اتفاق باید عملیاتی را انجام دهید که به آن Clearing floats می گویند. چندین روش برای این کار وجود دارد که در ادامه معرفی شده اند و در نهایت بهترین و محبوب ترین روش معرفی می شود:

 

روش های رفع مشکل float

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

 

استفاده از یک عنصر خالی در نگهدارنده

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

پس کافی است عنصر زیر را به عنوان آخرین فرزند نگهدارنده قرار دهید:

 


<div style="clear:both;"></div>

 

یا می توانید از یک کلاس برای این کار استفاده کنید:

 


<div class="clearfix"></div>

 


.clearfix {
  clear: both;
}

 

در نهایت نتیجه بصورت زیر خواهد بود و مشکل برطرف می شود:

 
رفع مشکل float
 

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

 

استفاده از ویژگی overflow برای نگهدارنده

کافی است ویژگی overflow را برای عنصر نگهدارنده بر روی مقدار hidden یا auto تنظیم کنید.

 


.floats-container {
  overflow: hidden;
  /* یا */
  overflow: auto;
}

 

این روش بدلیل سادگی آن زیاد مورد استفاده قرار میگیرد اما مسلما تعیین overflow برای یک عنصر می توان مشکلاتی را به همراه داشته باشد. شاید عنصر نگهدارنده محتوایی داشته باشد که بخواهد بیرون از آن قرار بگیرد, که ما با این کار جلوی این کار را می گیریم.

 

شناور کردن خود عنصر نگهدارنده

کافی است که به هر سمتی که ترجیح می دهید نگهدارنده را شناور کنید تا ارتفاع فرزندان شناگرش را بگیرد :)

 


.floats-container {
  float: right;
  /* یا */
  float: left;
}

 

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

 

استفاده از شبه عنصر after:

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

 


.container:after {
  content: "."; 
  visibility: hidden; 
  display: block; 
  height: 0; 
  clear: both;
}

 

این روش طی چند سال گذشته به گونه های مختلف معرفی و استفاده شده است اما بهترین و معروف ترین آنها را در ادامه معرفی می کنیم:

کافی است که به عنصر نگهدارنده کلاس clearfix بدهید (گاهی در برخی فریم ورک ها از نام کلاس cf برای این کار استفاده می شود که بهتر است با آن نیز آشنا باشید):

 


.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/**
 * 3
 * IE 6/7 only
 */
.clearfix {
  *zoom: 1;
}

 

1. تک فاصله ای که برای content در نظر گرفته شده است باعث می شود تا باگی که در مرورگر اپرا در زمان استفاده از ویژگی contenteditable بوجود می آید, از بین برود.

2. اینکه بجای block از table استفاده شده است به این خاطر است که از before: برای از بین بردن اشکال دیگری استفاده می کنیم. پس اگر before: نباشد می توانید از block استفاده کنید.

3. اگر به فکر پشتیبانی مرورگرهای ie6/7 نیز هستید از خط آخر می توانید استفاده کنید در غیر این صورت نیازی به نوشتن آنها نیست.

 
در اینجا before: چه نقشی دارد؟

در حالت عادی اگر فاصله ای بین عنصر فرزند و نگهدارنده نباشد اگر margin-top برای فرزند در نظر بگیرید به درستی عمل نمی کند و باید بین آنها یک فاصله هر چند یک پیکسلی باشد تا فرزند از عنصر نگهدارنده کنده شود. که می توان آن فاصله را با استفاده از padding-top: 1px برای عنصر نگهدارنده بوجود آورد که روش جالبی نیست. اما می توانید با استفاده از before: و تعیین display از نوع table برای آن به نتیجه مشابه برسید. که این روش هیچ اثر جانبی نخواهد داشت.

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

 


.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

 

این روش از آنجایی که یک بار نوشته می شود و چندین بار استفاده می شود و همینطور نیازی به عنصری در html ندارد و بعلاوه باعث هیچ اثر جانبی نمی شود بهترین روش تا به امروز است.

 

روش استاندارد

در آینده یک مقدار به مقادیر ویژگی min-height به نام contain-floats اضافه می شود که کارش رفع مشکل float می باشد. تا آن زمان باید از روش های بالا لذت ببریم :)

 

چند نکته

ویژگی float با ویژگی های display و position تداخل هایی دارد:

اگر display برای یک عنصر none باشد, float روی آن عنصر هیچگونه تاثیری نخواهد داشت.

عناصری که مقدار position آنها absolute یا fixed است نمی توانند شناور شوند و float برای آنها none در نظر گرفته می شود.

اگر عنصری ذاتا inline باشد یا display آن inline باشد زمانی که float روی آن اعمال می شود تبدیل به block می شود.

همینطور عنصری با display از نوع inline-table به حالت table تغییر پیدا می کند.

 

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

در دموی زیر برای چیدمان عناصر در کنار هم از float استفاده شده است. کد دمو را با دقت بررسی کنید:

 

See the Pen float layout by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

پشتیبانی مرورگر ها

ویژگی float در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, اندروید و iOS پشتیبانی می شود.

 

24 دیدگاه برای “float

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

    1. سلام خدمت شما

      اگر مشکلتون در مورد اینه که نمی تونیم محتوای پست رو بزارید توی مدال بهتره از وردپرس بلدها بپرسین که من جزوشون نیستم :)

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

  2. سلام خسته نباشید.
    میخواستم بدونم میشه با فلکس باکس صفحه ارایی کرد مثلا ستون های مختلف قالب سایتو با فلکس باکس طراحی کرد

    ممنون به خاطر سایت بینظیرتون

      1. خیلی ممنون از پاسختون.
        یه سوال تخصصی داشتم که ربطی به موضوع نداره
        من پسر 17 سالم که که زبان های html , css , javascript , jQuery و تا حدودی php , ruby رو بلدم به نظر شما ارزش ادامه دادن رو داره که این زبان ها رو به طور حرفه ای یاد بگیر و شغل اصلیم رو بر پایه وب قرار بدم؟
        ببخشید اگه سوالم بی ربط بود.ممنون میشم جواب بدید

        1. آقا مهدی عزیز یک سوال خیلی سخت رو از یک نفر کم تجربه دارید می پرسید مراقب خودتون باشید :)

          من مستقیما نمی تونم جواب بدم چون به خیلی عوامل بستگی داره این موضوع و جواب ثابت نداره ولی یک نکته خیلی کلیشه ای که همه دست کم می گیرننش رو تکرار می کنم

          به کاری که داری می کنی علاقه داشته باشی –> توی اون کار بهترین میشی –> وقتی بهترین باشی هم از خودت راضی هستی هم از کارت هم از درآمدت –> در نتیجه از زندگیت راضی هستی.

          نکته دیگه این که کنکاش کنید چیزای دیگرو هم تجربه کنید چون از نظر سنی توی شرایط خوبی هستید خداروشکر. شاید راه دیگه ای رو پیدا کردید که خیلی بیشتر علاقه داشتید. در کل منظورم اینه که توی سن تست کردن هستید پس همه چیزو یه کوچولو مزه مزه کنید ولی توی موضوع عمیق نشید. تا علاقتون رو پیدا کنید

          و در نهایت دنبال تخصص باشید. کسی که گفت من از وب همه چی می دونم (امنیت, بک اند, فرانت اند و… ) شک نکنید یه جای کارش میلنگه چون امکان عمیق شدن توی همه اینها برای یک نفر خیلی کمه.
          طوری باشید که وقتی از در یک جا وارد شدید مثلا بگن مهدی روبی اومد :) منظورم اینه که به یک تخصص بشناسنتون

          البته اشتباه برداشت نشه در مورد بقیه چیزا باید آگاهی داشته باشید (ولی نه عمیقا) و خیلی هم کمکتون می کنه.

          CSS کاری که php می دونه خیلی بهتر از اونی که نمی دونه کد می زنه. خیلی…

          خلاصه:
          1. تجربه کنید
          2. علاقتون رو پیدا و انتخاب کنید
          3. متخصص بشین

  3. مجتبی جان،

    یه بزرگی میگه: کاری رو انتخاب کنید که بهش علاقه دارید، و از ان روز به بعد در زندگی، حتی یک روز هم کار نخواهید کرد.

    درود.

  4. سلام مرسی از توضیحتون ولی من جواب مشکلم پیدا نکردم
    الان وقتی بهع قسمت پست و ساید بارم float:right دادم تو صفحه نمایش بزرگ میره و میچسبه به سمت راست سایت و وسط نیست
    مشکل کجاست؟؟

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

    2. واقعا با این وبسایت حال کردم. منم دنبال حل این مشکل بودم که از توی همین سایت و اینجا راه حلشو پیدا کردم:
      http://css-tricks.ir/tutorial/%D9%88%D8%B3%D8%B7-%D9%82%D8%B1%D8%A7%D8%B1-%D8%AF%D8%A7%D8%AF%D9%86-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-css/
      خیلی از سایتها رو برای این موضوعات میگردم. ولی مثل اینکه برای رفع تکلیف مطلب مینویسن یا هم توان آموزش درست ندارن. اما مثل اینکه این سایت بهترینه و در زمینه سی اس اس واقعا آدم میدونه اینجا حتما به جوابش میرسه
      آقا مجتبای سیدی دمت گردم و از اینکه با سایتت آشنا شدم خوشحالم
      موفق باشی.

  5. سلام. من یه باکس دارم که شامل متن پست و کامنت ها میشه. وقتی یه دونه دیگه کپی می کنم همشون روی هم بیفته . به هر طریقی که امتحان می کنم. به نتیجه نمیرسم. لطفاراهنماییم کنید خیلی ضروریه

  6. سلام آقا مجتبی استاد عزیزم !
    ممنون از زحماتتون .. هر چه قدر تشکر بکنم کافی نیست واقعا !!!
    علاوه بر وب به آدم درس زندگی میدید …
    متاسفانه هر کدوم از همکارای شما که در زمینه ی وب فعال هستن به ما تازه کارا با لفظ خوبی برخورد نمیکنن و واقعا بعضی اوقات آدم دل زده میشه از پاسخ های سرد و نا امید کننده توی تاپیک های متفاوت
    متشکرم از این همه تواضع و فروتنی شما (این ها رو حرف دل بنده بدونید و از روی تملق و عشوه زبانی بهش نگاه نکنید)

    و در آخر استاد عزیز یک سوال داشتم
    من کااااملا مبتدی هستم و صفحه آرایی ها رو با float انجام میدم در قالب های دو ستونه طبعا راحت تر ستون ها رو با float و calc کنار هم میچینم همچنین تو قالب های سه ستونه هم باز از تکنیک float استفاده میکنم
    به طور کلی میخواستم بدونم این روش منطقی هست اصلا … یا اگه بخوایم علمی بهش نگاه کنیم یه کار پیش پا افتاده و از ریشه غلطی هست ؟؟

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

    ببخشید سرتون رو درد آوردم ولی تقریبا میتونم بگم مهم ترین سوالای فی الحال منه که مدت هاست دنبال جوابشم با تشکر

    1. سلام ممنونم از پیامتون شما لطف دارین امیدوارم همینطور باشه.

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

      هر تعداد ستونی رو می تونید با همین روش پیاده کنید.

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

      براتون آرزوی موفقیت می کنم.

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *