آموزش طراحی وب

float و clear در CSS

در این جلسه ی آموزشی راجع به float و clear در CSS صحبت می کنیم همچنین اشاره ای به nth-child ها هم می کنیم .

CSS

فصل چهارم : Properties در CSS

جلسه نهم  : float و  clear در CSS

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

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

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

 

خاصیت  Float

Float شامل مقادیر زیر میشه :

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

Left : با استفاده از این مقدار عنصر رو در سمت چپ قرار میدید .

Right : با استفاده از این مقدار عنصر رو سمت راست قرار میدید .

Initial : مقدار پیش فرض مرورگر رو به عنصر اختصاص میده .

inherit : مقدار عنصر والد رو برای عنصر فرزند لحاظ می کنه . مثلا اگر عنصر والد دارای مقدار left باشه عنصر فرزند دارای مقدار  inherit باشه . مقدار left رو به عنصر فرزند اختصاص میده .

 

به کد CSS زیر دقت کنید :

کد html این ساختار :

به div1 مقدار right رو دادیم و به div2 مقدار left رو دادیم . حالا نتیجه به شکل زیر خواهد بود :

1

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

 

نکته اول و اصلی ترین نکته

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

حالا ما میخوایم بعد از این دو ستون یک ستون قرار بدیم . به کد css زیر دقت کنید :

کد html ساختار جدید :

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

 2

عنصر سوم ما با مشکل مواجه شد و نتونستیم بعد از این عناصر قرارش بدیم . برای حل این مشکل از خاصیت clear استفاده می کنیم . به کد css جدید زیر دقت کنید :

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

3

با درج clear ما خاصیت float رو خنثی کردیم تا اثرات float در عنصر بعدی تاثیر نگذاره .

 

خاصیت Clear

همینطور که مشاهده کردید این خاصیت برای خنثی کردن خاصیت float استفاده میشه . clear شامل مقادیر زیر میشه :

None : هیچ کدوم از عناصر قبلی که شامل خاصیت float بودن رو خنثی نمیکنه .

Right: عنصری که float با مقدار right داره رو خنثی می کنه .

Left: عنصری که float با مقدار left داره رو خنثی می کنه .

Inherit : مقدار عنصر والد رو به خودش اختصاص میده .

Initial : مقدار پیشفرض رو لحاظ می کنه .

both :  هر دو سمت رو خنثی میکنه .

 

 نکته دوم که در بعضی مواقع شمارو دچار مشکل میکنه :

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

کد html ساختار :

نتیجه ی کد بالا :

4

اگر با دقت مشاهده کنید ، متوجه میشید که با دادن margin باکس آخر هر ردیف هم شامل margin-left شده و در سمت چپ باکس یه فاصله ای ایجاد کرده که باعث شده به لبه ی کادر نچسبه که این برای نمایش محصولات ما مناسب نیست . هدف ما ایجاد margin بین باکس ها هست اما نه باکس های آخره هر ردیف . ما میخوایم margin-left باکس های آخره هر ردیف رو برابر با صفر قرار بدیم تا مثل باکس های اول هر ردیف به لبه ی کادر بچسبه .

برای این کار از nth-child ها استفاده می کنیم . به کد css زیر دقت کنید :

حالا نتیجه رو ملاحظه کنید :

5

میبینید که با استفاده از nth-child ها تونستیم margin-left باکس های آخر و برابر با صفر قرار بدیم تا نظم خاصی بگیرند و به درستی نمایش داده شوند . در رابطه با nth-child ها در جلسات آینده مفصل صحبت خواهیم کرد .

 

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

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲۰

    • سلام دوست عزیز
      خوشحالم که این آموزش براتون مفید بوده .
      موفق و پیروز باشید .

  • سلام. یک سوالی داشتم. فرض کنید یک div داریم که خود شامل ۳ div میشود و هر سه float:right دارند. (ستون سمت راست، ستون وسط، ستون سمت چپ مدل وبلاگی رو در نظر بگیرید) مشکل اینه که وقتی height یک div از بقیه بیشتر هست دو div دیگر نامرتب هستند. چه کدی باید نوشت تا height همه div ها برابر با اون div باشه که بیشترین height رو داره. شرمنده یکم پیچیده شد 🙂

    • سلام دوست عزیز

      طبیعتا نباید مشکلی باشه ، و عموما یه ستون همیشه ارتفاعش بیشتر از ستون های دیگه هست . اما اگر بخواین میتونید با جی کوئری همه ی div هارو یکسان سازی کنید. اما ببینید مشکل از کجاست که div های دیگه تون بهم میریزه .

      موفق باشید .

  • آقای همت یار میشه یه کم بیشتر درمورد انتخابگر :nth-child توضیح بدین در حالت کلی با این انتخابگر آشنا هستم ولی این موردی که شما به کار بردین برام تازگی داره منظورم مقدار توی پرانتز هستش من معمولا عدد میذاشتم ولی شما از یه مقدار مجهول n هم استفاده کردین.
    باتشکر

    • سلام
      یه مطلب آموزشی در رابطه با nth-child ها تو سایت منتشر می کنم. چون بحثش مفصله.
      موفق و پاینده باشید

  • سلام میشه یه راهنمایی کنید بگید چگونه مشکل منوی سمت راستمو بیارم با منوی پست هام تنظیم کنم؟
    با تشکر

  • سلام و
    clear یک مقدار دیگه هم میگیره : both
    که در قسمت خاصیت Clear ذکر نکردین . با تشکر از سایت خوبتون

  • با سلام
    من یه مشکل تو همین مبحث تو وبلاگ خودم داشتم. تو فوتر وبلاگ من سه تا div هست که دوتا از اونا float:right و یکی -آخری- float:left هست. اما مشکلی که هست تو حالت ریسپانسیو div سوم یا آخری خراب نشون داده می شده. و یه چیز عجیبه دیگه هم اینه که وقتی div سوم رو float:right قرار میدم اون div ، قبل از div های اول و دوم نشون داده می شه. در حالی که تو کد html به ترتیب هستن.
    ممنون اگه جواب بدین . از clear هم استفاده کردم جواب نداد

  • سلام . حال شما ؟
    حتما ازین به بعد مطالب طراحی سایت رو از سایت شما ادامه میدهم .
    خیلی ممنون .

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین