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

چینش در CSS

آشنایی با چینش یا Float
آشنایی با چینش یا Float

چگونه می‌توانیم چینش متن یا اشیاء را در 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: تمام نسخه ها

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

36873

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

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

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

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

[/box]

نتیجه گیری

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

13 نظر

13 پاسخ

  1. سلام
    img{
    width:300px;
    float: left;
    }
    .second {
    clear: left;
    }

    .third{
    clear: left;
    }

    (راجب قالب جدید سایت اینکه فهرست سمت چپ حذف شده و title مقالات پس زمینه خالی داره(مثلا جلسه۳۸) یه مقدار از نظر تجربه کاربری سخته. ایکاش حداقل قسمت فهرست سمت چپ رو برگردونید)

    1. سلام حسین جان. ببخش پاسخاتو دیر بررسی میکنیم. درست پاسخ دادی ممنون ?
      مرسی بابت پیشنهادی که درمورد تجربه کاربری سایت دادی. این اواخر یه مقدار تغییرات تو ظاهر سایت لحاظ کردیم و هنوز هم ادامه میدیم.
      تا الان فکر کنم فهرست سمت چپ (لیست مقالات) قرار داده شده باشه.

  2. سلام
    ممنون بابت مطالب خوبتون. یه سوالی از توو جوابای دوستان واسم پیش اومد! کابرد دستور زیر چیه؟
    border-sizing: border-box

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

  3. *{
    background-color:#f4f4f4;
    margin:0px;
    padding:0px;
    box-sizing:border-box;
    }

    img{
    width:300px;float: left;
    }
    .second{
    clear: left;
    }
    من این جواب مهدی نعیمی رو نوشتم کار نمیکرد ولی وقتی کپیش کردم درست شد
    چکش هم کردم همه رو درست مینوشتم. حتی یکی یکی هم کپی میکردم کار نمیکرد ولی همه رو باهم کپی کردم کار کرد یعنی چی:|

    1. خب اگه مشکلی هست که هنوز هم گریبان گیرش هستی از کدایی که خودت نوشتی یه عکس آپلود کن که بررسیشون کنیم 🙂

  4. *{
    background-color:#f4f4f4;
    margin:0px;
    padding:0px;
    box-sizing:border-box;
    }

    img{
    width:300px;float: left;
    }
    .second{
    clear: left;
    }

  5. سلام
    پاسخ سوال: فقط کافیست به استایل img کد ;float: left اضافه کنیم.

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

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

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

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=