Sharefix

Sauƙaƙe floats ta ƙara .clearfix zuwa kashi na iyaye . Hakanan za'a iya amfani dashi azaman mixin.

Yi amfani da HTML:

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

Lambar tushen mixin:

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

Yi amfani da mahaɗin a cikin SCSS:

.element {
  @include clearfix;
}

Misali na gaba yana nuna yadda za'a iya amfani da clearfix. Idan ba tare da share fage ba, nannade div ba zai zagaya kusa da maɓallan ba wanda zai haifar da fagewar shimfidar wuri.

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