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