طرح CSS - clear و clearfix
- صفحه قبل CSS شناور
- صفحه بعدی طرح CSS - مثال شناور
ویژگی clear
clear این ویژگی مشخص می‌کند که کدام عناصر می‌توانند در کنار عنصر پاک شده فلاش کنند و از کدام سمت.
clear این ویژگی می‌تواند یکی از ارزش‌های زیر را تنظیم کند:
- none - اجازه وجود عنصر فلاش در هر دو سمت داده می‌شود. ارزش پیش‌فرض
- left - اجازه وجود عنصر فلاش در سمت چپ داده نمی‌شود
- right - اجازه وجود عنصر فلاش در سمت راست داده نمی‌شود
- both - اجازه وجود عنصر فلاش در هر دو سمت داده نمی‌شود
- inherit - عنصر ارزش clear پدر خود را ارث می‌برد
استفاده از clear یکی از کاربردهای رایج ویژگی float پس از ویژگی.
در حین پاک کردن فلاش، باید پاک کردن و فلاش را با هم تطبیق داد: اگر عنصری به سمت چپ فلاش کند، باید سمت چپ را پاک کرد. عنصر فلاش شما همچنان فلاش خواهد کرد، اما عنصر پاک شده در زیر آن نمایش داده خواهد شد.
مثال زیر فلاش سمت چپ را پاک می‌کند. نشان‌دهنده این است که در سمت چپ (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 - مثال شناور
