Langkau ke kandungan utama Langkau ke navigasi dokumen
in English

Clearfix

Kosongkan kandungan terapung dengan cepat dan mudah dalam bekas dengan menambahkan utiliti clearfix.

Kosongkan floats dengan mudah dengan menambahkan .clearfix elemen induk . Boleh juga digunakan sebagai mixin.

Gunakan dalam HTML:

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

Kod sumber mixin:

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

Gunakan mixin dalam SCSS:

.element {
  @include clearfix;
}

Contoh berikut menunjukkan cara clearfix boleh digunakan. Tanpa clearfix, div pembalut tidak akan merentangi sekeliling butang yang akan menyebabkan susun atur rosak.

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