CSS Layout - clear and clearfix

ویژگی clear

clear ویژگی مشخص می‌کند که کدام عناصر می‌توانند در کنار عناصر پاک شده شناور شوند و از کدام سمت.

clear ویژگی می‌تواند یکی از ارزش‌های زیر را تنظیم کند:

  • none - اجازه وجود دارد که عناصر شناور در هر دو سمت باشند. ارزش پیش‌فرض
  • left - اجازه وجود ندارد که عناصر شناور در سمت چپ باشند
  • right - اجازه وجود ندارد که عناصر شناور در سمت راست باشند
  • both - اجازه وجود ندارد که عناصر شناور در سمت چپ یا راست باشند
  • inherit - عنصر از ارزش clear پدر خود ارث می‌برد

استفاده clear یکی از کاربردهای رایج ویژگی ویژگی پس از ویژگی.

در حذف شناوری، باید با شناوری مطابقت داد: اگر عناصری به سمت چپ شناور شود، باید سمت چپ را پاک کرد. عناصر شناور شما ادامه خواهد داد که شناور باشند، اما عناصر پاک شده در زیر آن‌ها نمایش داده خواهند شد.

مثال زیر به حذف شناوری به سمت چپ کمک می‌کند. این نشان می‌دهد که در سمت چپ (div) اجازه وجود ندارد که عناصر شناور باشند:

مثال

div {
  clear: left;
}

آموزش شخصی

Hack clearfix

اگر عناصری از عنصری که شامل آن است بلندتر باشد و شناور باشد، آن به خارج از قالب خود“جاری” خواهد شد:

پس می‌توانیم به عنصر شامل overflow: auto; اضافه کنیم تا این مشکل را حل کنیم:

مثال

.clearfix {
  overflow: auto;
}

آموزش شخصی

پس می‌توانیم به عنصر شامل overflow: auto; اضافه کنیم تا این مشکل را حل کنیم. اما، تکنیک جدید و امن‌تر clearfix hack برای بیشتر وب‌سایت‌ها استفاده می‌شود:

مثال

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

آموزش شخصی

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