طراحی وب CSS - clear و clearfix
- صفحه قبل حرکت CSS
- صفحه بعدی مثال شناور CSS
ویژگی پاک کردن
پاک کردن ویژگی مشخص می‌کند که کدام عناصر می‌توانند در کنار عنصر پاک شده شناور شوند و از کدام سمت.
پاک کردن ویژگی می‌تواند یکی از ارزش‌های زیر را تنظیم کند:
- none - اجازه وجود عنصر شناور در هر دو سمت را می‌دهد. ارزش پیش‌فرض
- left - اجازه وجود عنصر شناور در سمت چپ را نمی‌دهد
- right - اجازه وجود عنصر شناور در سمت راست را نمی‌دهد
- both - اجازه وجود عنصر شناور در هر دو سمت را نمی‌دهد
- inherit - عنصر ارزش پاک کردن خود را از پدر خود می‌گیرد
استفاده از پاک کردن یکی از کاربردهای رایج ویژگی شناور در عنصرهایی است که شناور پس از ویژگی.
در هنگام پاک کردن شناوری، باید پاک کردن و شناوری را با هم تطبیق داد: اگر یک عنصر به سمت چپ شناور شود، باید سمت چپ را پاک کرد. عنصر شناور شما همچنان شناور خواهد بود، اما عنصر پاک شده در زیر آن نمایش داده خواهد شد.
مثال زیر به پاک کردن شناوری به سمت چپ کمک می‌کند. این نشان می‌دهد که در سمت چپ (جعبه) div اجازه وجود عنصر شناور را ندارد:
مثال
div {
clear: left;
}
clearfix Hack
اگر یک عنصر از عنصر شامل آن بلندتر باشد و شناور باشد، آن به خارج از جعبه خود “یورش” می‌کند:
پس می‌توانیم به عنصر شامل overflow: auto; اضافه کنیم تا این مشکل را حل کنیم:
مثال
.clearfix {
overflow: auto;
}
پس می‌توانیم به عنصر شامل overflow: auto; اضافه کنیم تا این مشکل را حل کنیم. اما، تکنیک جدید hack مدرن clearfix امن‌تر است و کد زیر در اغلب وب‌سایت‌ها استفاده می‌شود:
مثال
.clearfix::after {
content: "";
clear: both;
display: table;
}
شما در بخش‌های بعدی خواهید آموخت ::after عنصر ناشناخته.
- صفحه قبل حرکت CSS
- صفحه بعدی مثال شناور CSS
