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

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

دسته بندی موضوعات
سفارش تبلیغات

float و clear در CSS

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 ها در جلسات آینده مفصل صحبت خواهیم کرد .

 

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

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

دریافت فایل
رمز تمامی فایل های رمز دار : iranweblearn.com یا iroschool.com

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

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

  • فرزاد حسینی

    با اینکه نحوه انجام اینکار رو بلد بودم ولی روش شما بسیار جالبتر بود و چند تا نکته دیگه هم یاد گرفتم، بسیار ممنونم

    • میترا رحیمی

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

  • نوید میرزاآقازاده

    بسیار عالی ،

  • مرتضی

    سلام
    خیلی ممنون اموزش خوبی بود . خیلی برام کاربردی بود .

  • محمد

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

    • میترا رحیمی

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

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

      موفق باشید .

  • hassani

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

    • میترا رحیمی

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

  • hassany

    ممنونم منتظر مطلب آموزشیتون میمونم.

  • عرفان ولی زاده

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

  • امیر

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

  • محمد

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

  • سعید کریمی

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

    • حسین همت یار

      سلام ، سوالات فقط در پرسش و پاسخ جواب داده میشه . تشکر

  • ُسعید

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

  • مهدی

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟