I-clearfix

Mabilis at madaling i-clear ang lumutang na content sa loob ng container sa pamamagitan ng pagdaragdag ng clearfix utility.

Madaling i-clear ang floats sa pamamagitan ng pagdaragdag .clearfix sa parent element . Maaari ring gamitin bilang isang mixin.

Gamitin sa HTML:

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

Ang mixin source code:

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

Gamitin ang mixin sa SCSS:

.element {
  @include clearfix;
}

Ipinapakita ng sumusunod na halimbawa kung paano magagamit ang clearfix. Kung wala ang clearfix ang wrapping div ay hindi aabot sa paligid ng mga button na magdudulot ng sirang layout.

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>