Clearfix ye

Teliya la ani nɔgɔya la kunnafoni minnu bɛ panpan, olu jɛya minɛn kɔnɔ ni clearfix nafamafɛn dɔ farali ye.

nɔgɔya la s jɛya floatni farali .clearfix ye bangebaga yɔrɔ la . A bɛ se ka kɛ fana i n’a fɔ mixin.

Baara kɛ ni HTML ye:

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

A mixin source code ye:

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

Baara kɛ ni mixin ye SCSS kɔnɔ:

.element {
  @include clearfix;
}

Misali nata b’a jira cogo min na baara bɛ se ka kɛ ni clearfix ye. Ni clearfix tun tɛ wrapping div tun tɛna span kɛ butɔni lamini na min bɛna kɛ sababu ye ka layout kari.

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