چگونه می‌توانید شناور را پاک کنید (Clearfix)

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

ترفند clearfix

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

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

مثال

.clearfix {
  overflow: auto;
}

آزمایش کنید

به شرطی که بتوانید حاشیه‌های بیرونی و داخلی را کنترل کنید،overflow: auto; effet clarifiant flottant est bon (sinon, ممکن است بتوانید لولای را ببینید).

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

مثال

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

آزمایش کنید

صفحات مرتبط

آموزش:شناور کردن CSS