چگونه شناور را پاکسازی کنیم (Clearfix)

آموزش چگونه از technique clearfix برای پاکسازی شناور استفاده کنیم.

ترجیح techniques

اگر یک عنصر از عنصر شامل خود بلندتر باشد و شناور باشد، آنگاه آن از قابلیت خود خارج می‌شود.

بعد از آن، می‌توانیم به عنصر شامل overflow: auto; اضافه کنیم تا این مشکل را حل کنیم:

مثال

.clearfix {
  overflow: auto;
}

آزمایش کنید

تنها زمانی که بتوانید حاشیه‌های بیرونی و داخلی را کنترل کنید،overflow:auto تأثیر پاکسازی شناور بسیار خوب است (در غیر این صورت، ممکن است نوار прокسی را ببینید).

باوجود این، روش‌های جدید و مدرن clearfix امن‌تر هستند و بیشتر صفحات وب از کد زیر استفاده می‌کنند:

مثال

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

آزمایش کنید

صفحات مرتبط

آموزش‌ها:شناور CSS