آموزش CSSآموزش طراحی سایت

جلسه ۳۸ – خاصیت float در CSS

چینش در CSS

چگونه می‌توانیم چینش متن یا اشیاء را در CSS تغییر دهیم؟ چگونه Element ها را به سمت چپ چینش کنیم؟ چگونه از Float استفاده کنیم؟ Float چیست؟ چینش چیست؟

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

قبل از هر چیزی، باید با مفهوم float آشنا شیم و ببینیم که دقیقا، به چه عنصری عنصر شناور یا floated element گفته می‌شه؟

مفهوم float

کلمه float از لحاظ لغوی، به معنای شناور یا شناور بودن هست.

برای درک مفهوم float، کافیه به نحوه نوشتار مجله ها و مقالات مختلف توجه کنیم:

چینش مطالب یک مجله

همونطور که می‌بینیم، متن مورد نظر به شکل مناسبی، عکس رو محاصره می‌کنه و تمام فضاهای خالی ای که عکس نتونسته پر کنه رو اشغال می‌کنه.

از این موضوع، می‌تونیم به خوبی تو صفحات وب سایتمون هم استفاده کنیم و قالب هایی شبیه به مقاله داشته باشیم.

مقادیر خاصیت float

توسط این خاصیت، می‌تونیم عناصر حاضر تو صفحه وب سایتمون رو جا به جا و یا به اصطلاحی، “شناور” کنیم.

این خاصیت، می‌تونه چهار مقدار زیر رو قبول کنه:

  • none
  • right
  • left
  • inherit

مقدار none

این مقدار، مقدار پیش فرضی هست که یک عنصر بدون خاصیت float داره.

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

مقدار right

توسط این مقدار، می‌تونیم عنصر مورد نظر رو به انتهای سمت راست عنصر پدر اون منتقل کنیم.

به این ترتیب، بقیه محتوای برادر (sibling) اون، در کنار اون قرار گرفته و اون رو محاصره می‌کنه.

به مثال زیر توجه کنین:

استفاده از دستور float: right

برای این امر، کافیه که کد CSS رو به فرم زیر بنویسیم:

img{
   float: right;
}

مقدار left

این مقدار، دقیقا بر عکس مقدار right عمل می‌کنه و عنصر مورد نظر رو، به انتهای سمت چپ عنصر پدر اون منتقل می‌کنه.

همزمان، تمام محتوای دیگه‌ی عنصر پدر، عنصر مورد نظر ما رو محاصره می‌کنن.

به مثال زیر توجه کنین:

استفاده از دستور float: left

برای این منظور، کد CSS به شکل زیر نوشته می‌شه:

img{
   float: left;
}

مقدار inherit

این مقدار، به عنصر مورد نظر، مقداری از float رو اختصاص می‌ده که به عنصر پدر اون عنصر، اختصاص داده شده.

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

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

برای این امر، کافیه که به شکل زیر عمل کنیم:

dark

عناصر div، در حالت طبیعی دارای نحوه نمایش block هستن و زیر هم قرار می‌گیرن.

اما با کمک دستور float:right که بهشون دادیم، اون ها این خاصیت رو نادیده گرفته و در کنار هم قرار می‌گیرن.

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

برای مطالعه بیشتر در مورد واکنش گرایی، می‌تونین به مقاله طراحی واکنش گرای میزفا مراجعه کنین.

استفاده از clear در float

خاصیت clear، به ما این امکان رو می‌ده که عناصرمون رو از محاصره کردن عنصر شناور منع کنیم.

ساده بگیم، اگه یک عکس شناور تو صفحمون داریم و متن کنارش می‌خواد اون رو محاصره کنه، با اختصاص دادن خاصیت clear به اون متن، بهش می‌گیم: برو پایین عکس قرار بگیر، و به شناور بودن عکس کاری نداشته باش!

حالا برامون سوال پیش میاد: اگه قرار باشه محتوامون مثل قبل رفتار کنه، عنصر شناور رو محاصره نکنه و پایین اون قرار بگیره، اصلا چرا عنصرمون رو شناور می‌کنیم؟

به مثال زیر توجه کنین:

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

  • یک عکس
  • یک متن با کلاس first-paraph
  • یک متن دیگه با کلاس second-paraph

و همچنین عکس مورد نظر دارای خاصیت float هست.

قاعدتا باید اینطور چیزی باشه:

قبل از استفاده از clear

همونطور که می‌بینیم، دو متن مورد نظر فضای خالی رو پر کردن.

چیزی که ما می‌خوایم، اینه که متن دوم به پایین عکس منتقل شه و فضای خالی رو پر نکنه.

به اصطلاحی، “سمت راست خودش رو شناور محسوب نکنه”.

کافیه بنویسیم:

.second-paraph{
   clear: right;
}

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

بعد از استفاده از clear

اگه متوجه قسمتی از مثال ها نشدین و یا مشکلی پیدا کردین، حتما تو قسمت نظرات ذکر کنین، ما پاسخگو هستیم 🙂

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

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

  • Firefox: تمام نسخه ها
  • chrome: تمام نسخه ها
  • safari: تمام نسخه ها
  • IE: تمام نسخه ها
  • opera: تمام نسخه ها

پایان ترم

سوال:

به کد های زیر و نتیجه اون ها دقت کنین:

36873

کدی رو به اون ها اضافه کنین که شاهد نتیجه زیر باشیم:

کوییز مقاله ۳۸

نکته: کد اضافه شده باید حتما از مطالب همین مقاله باشه.

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

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

ادامه این راه رو تو مقاله های flexbox و grid خواهیم دید،‌ امیدوارم از این مقاله لذت کافی رو برده باشید 🙂

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

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

‫2 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

    1. سلام سینا. تا حدی درست گفتی، اما نه کامل.
      دقت کن که فقط پاراگراف اول در کنار عکس حضور داره، دو پاراگراف دیگه با عکس در یک راستا نیستن.

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

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


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر