Source

Kliafiks

Kwik ɛn izi fɔ klia di tin dɛn we de flɔt insay wan kɔntena bay we yu ad wan kliafiks yutiliti.

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

<div class="clearfix">...</div>
// Mixin itself
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

// Usage as a mixin
.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-left">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>