آموزش HTML5 و CSS3 آموزش ویژگی clear در CSS | پاسخ وردپرس |

مطالب پیشنهادی برای شما مهمان عزیز

سلام خدمت شما,

در خدمت شما هستم با یکی دیگه از جلسات آموزش HTML5 و CSS3 توی این جلسه می خواهیم
آموزش ویژگی clear در CSS خدمت شما آموزش بدیم پس بامن تا آخر همراه باشید .

آموزش ویژگی clear در CSS

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

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

[checklist]

  • None : هیچ کدوم از عناصر قبلی که شامل خاصیت float بودن رو خنثی نمیکنه .
  • Right: عنصری که float با مقدار right داره رو خنثی می کنه .
  • Left: عنصری که float با مقدار left داره رو خنثی می کنه .
  • Inherit : مقدار عنصر والد رو به خودش اختصاص میده .
  • Initial : مقدار پیشفرض رو لحاظ می کنه .
  • both : هر دو سمت رو خنثی میکنه .

[/checklist]

آموزش html5 و css3

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

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

کد html ساختار :

اگه کد بالا امتحان کنید شما الان می بینیدکه ما ۶ باکس خواهیم داشتم.

بیشتر بخوانید :
آموزش HTML و CSS آموزش after:: و before:: در CSS | پاسخ وردپرس |

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

حال کار ویژگی clear این است که از جریان دادن عناصر در کنار عنصری که شناور شده است جلوگیری کند.

اگر عنصری دارید که در سمت راست آن عنصری شناور به سمت راست (float: right) وجود دارد و می خواهید عنصر شما در کنار آن عنصر قرار نگیرد و به پایین آن سقوط کند کافی است مقدار clear آن را برابر با right قرار دهید.

در مثال زیر تصویر به سمت راست شناور شده است در نتیجه متن در کنار و پایین آن جمع شده است:

کد css

کد html

نتیجه 

آموزش css

همانطور که مشاهده می کنید جالب نیست که نیمی از لیست در کنار تصویر و نیمی دیگر در زیر آن قرار بگیرند. برای جلوگیری از این کار می توانیم به عنصر ul ویژگی clear را با مقدار right بدهیم تا از این مشکل نجات پیدا کنیم:

بیشتر بخوانید :
آموزش HTML5 و CSS3 تکمیل باکس تبلیغات متنی به صورت حرفه ای

کد css

کد html

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

بیشتر بخوانید :
آموزش html5 و css3 جلسه 6 تگ a بررسی تمام اتریبیوت های a

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

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

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

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

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