CSS – پاکسازی (Clear)

خاصیت Clear

هنگامی که از خاصیت float استفاده می‌کنیم و می‌خواهیم عنصری که بعد از آن قرار می‌گیرد زیر (نه در سمت چپ یا راست) عنصر شناور قرار بگیرد، باید از خاصیت clear استفاده کنیم.

خاصیت clear مشخص می‌کند که عنصر بعدی در کنار عناصر شناور قرار نگیرد.

مقادیر خاصیت Clear:

  • none: عنصر در کنار عناصر شناور قرار می‌گیرد (پیش‌فرض).
  • left: عنصر به زیر عناصر شناور در سمت چپ منتقل می‌شود.
  • right: عنصر به زیر عناصر شناور در سمت راست منتقل می‌شود.
  • both: عنصر به زیر تمام عناصر شناور در سمت چپ و راست منتقل می‌شود.
  • inherit: عنصر مقدار clear را از عنصر والد خود به ارث می‌برد.

مثال Clear:

در این مثال، عنصر div2 به زیر عنصر div1 که به سمت چپ شناور شده، منتقل می‌شود:

.div1 {
  float: left;
}

.div2 {
  clear: left;
}

Clearfix Hack

وقتی یک عنصر شناور بلندتر از عنصر کانتینر خود باشد، به دلیل خاصیت شناور شدن، ممکن است از کانتینر خود “خارج” شود. برای حل این مشکل می‌توان از هک clearfix استفاده کرد.

بدون Clearfix:

عنصر شناور از کانتینر خارج می‌شود و چیدمان صفحه را به هم می‌زند.

با Clearfix:

با اضافه کردن clearfix می‌توان این مشکل را حل کرد.

مثال ساده Clearfix:

این روش به خوبی کار می‌کند مادامی که کنترل خوبی روی margin و padding داشته باشید:

.clearfix {
  overflow: auto;
}

روش مدرن Clearfix:

روش مدرن clearfix امن‌تر است و در اکثر صفحات وب مورد استفاده قرار می‌گیرد. این روش از شبه‌عنصر ::after استفاده می‌کند:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

شبه‌عنصر ::after یک فضای خالی بعد از محتوای عنصر ایجاد می‌کند تا از خروج شناوری جلوگیری کند.

این روش‌ها به بهبود چیدمان و جلوگیری از بروز مشکلات شناور شدن عناصر در صفحات وب کمک می‌کنند.

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.