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
یک فضای خالی بعد از محتوای عنصر ایجاد میکند تا از خروج شناوری جلوگیری کند.
این روشها به بهبود چیدمان و جلوگیری از بروز مشکلات شناور شدن عناصر در صفحات وب کمک میکنند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام