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

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

در این مقاله قصد دارم یه ترفند در رابطه با clear خدمتتون آموزش بدم،اگر خاطرتون باشه برای استفاده از clear یه المنت html میذاشتیم و به اون کلاس clear میدادیم …

 clear

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

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

اگر خاطرتون باشه برای استفاده از clear یه المنت html میذاشتیم و به اون کلاس clear میدادیم که اون کلاس شامل خصوصیات زیر میشد :

این کار رو انجام میدادیم که float هایی که به عناصر قبل دادیم خنثی بشه و تاثیری روی عناصر بعدی نداشته باشه. حالا ما میخوایم این کار رو حذف کنیم، به عبارتی html های اضافی رو حذف می کنیم و بهینه تر کار می کنیم.

برای این کار از شبه کلاس after استفاده می کنیم ، اولین نکته ای که باید خدمتتون عرض کنم اینه که clear روی عناصر block تاثیر گذار هست پس این خاصیت رو فراموش نکنید.

تصویر می کنیم html ما بصورت زیر هست :

با استایل :

ما به li ها float دادیم تا کنار هم قرار بگیرند حالا باید بعد از ul از clear استفاده کنیم تا paragraph  به مشکل برنخوره . خوب باید بگم که ما از  clear استفاده میکنیم اما نه بصورت  html ، اینکار رو از طریق css انجام میدیم:

همونطور که میدونید زمانی که از  after استفاده می کنید ، یک کلاس اضافه به عنصر میدید و به عنوان یه لایه مجزا محاسبه میشه. ما با after گفتیم بعد از ul یه کلاس تعریف کن که پارامترهای بالا رو داشته باشه، اول از همه  display:block تعریف می کنیم که اگر نباشه clear کار نمیکنه.

با اینکار شما بهینه کار میکنید و کد اضافه در html بکار نمیبرید ، بیشترین کاربردی هم که داره در li ها هست که نمیتونید بعد از هر li از عنصر دیگه ای برای clear استفاده کنید، به راحتی به li ها after با clear میدید و مشکل رو حل می کنید.

 

امیدوارم که این مقاله براتون مفید بوده باشه.

موفق و پاینده باشید

حسین همت یار

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

۱ دیدگاه

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

پنل کاربران

بستن
*
*

نظرسنجی

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

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

اموزش تصادفی

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

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

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

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