تخطي إلى المحتوى الرئيسي انتقل إلى ملاحة المستندات
in English

كليرفكس

مسح المحتوى العائم بسرعة وسهولة داخل الحاوية عن طريق إضافة أداة clearfix المساعدة.

امسح floats بسهولة عن طريق الإضافة .clearfix إلى العنصر الأصل . يمكن استخدامه أيضًا كخلط.

استخدم في HTML:

<div class="clearfix">...</div>

كود مصدر mixin:

@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

استخدم المزيج في SCSS:

.element {
  @include clearfix;
}

يوضح المثال التالي كيف يمكن استخدام clearfix. بدون clearfix ، لن يمتد التفاف div حول الأزرار مما قد يتسبب في حدوث تخطيط معطل.

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
</div>