Lewati ke konten utama Lewati ke navigasi dokumen
Check
in English

Hapus perbaikan

Hapus konten mengambang dengan cepat dan mudah dalam wadah dengan menambahkan utilitas clearfix.

Hapus floats dengan mudah dengan menambahkan .clearfix elemen induk . Bisa juga digunakan sebagai campuran.

Gunakan dalam HTML:

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

Kode sumber mixin:

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

Gunakan mixin di SCSS:

.element {
  @include clearfix;
}

Contoh berikut menunjukkan bagaimana clearfix dapat digunakan. Tanpa clearfix, div pembungkus tidak akan menjangkau tombol yang akan menyebabkan tata letak yang rusak.

html
<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>