حذف تعويم المحتوى Clearfix في إطار العمل Bootstrap

استخدم الصنف ‎.clearfix الذي يقدّمه إطار العمل Bootstrap لحذف تعويم المحتوى داخل حاويّة.

يُضاف الصنف ‎.clearfix إلى العنصُر الأب لإلغاء تأثير الخاصيّة float. يمكن استخدامه بصيغة مخلوط Sass.

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

// تعريف المخلوط
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// استخدام المخلوط
.element {
  @include clearfix;
}

يوضّح المثال التالي استخدام الأداة Clearfix. يؤدّي عدم استخدام ‎.clearfix في المثال إلى عدم تمدّد عنصُر <div> المغلِّف حول الزرّيْن، ممّا ينتُج عنه مُخطَّط غير سلس.

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">مثال على زرّ عائم إلى اليسار</button>
  <button type="button" class="btn btn-secondary float-right">مثال على زرّ عائم إلى اليمين</button>
</div>

مصادر

• صفحة في Clearfix توثيق Bootstrap.