Kliafiks

I izi fɔ klia floats bay we yu ad .clearfix to di mama ɛn papa ɛlimɛnt . Yu kin yuz am bak as mixin.

Yuz insay HTML:

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

Di mixin sɔs kɔd:

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

Yuz di mixin na SCSS:

.element {
  @include clearfix;
}

Di ɛgzampul we de dɔŋ ya de sho aw dɛn kin yuz di kliafiks. Witout di kliafiks di wrapping div nɔ go span rawnd di bɔtin dɛn we go mek layout brok.

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