Source

Clearfix

Esory haingana sy mora ny atiny mitsingevana ao anaty fitoeran-javatra iray amin'ny alalan'ny fanampiana fitaovana clearfix.

Hazavao mora floats amin'ny fanampiana .clearfix ny singa parent . Azo ampiasaina ho mixin ihany koa.

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

// Usage as a mixin
.element {
  @include clearfix;
}

Ity ohatra manaraka ity dia mampiseho ny fomba azo ampiasana ny clearfix. Raha tsy misy ny clearfix dia tsy mirefy manodidina ny bokotra ny div famonosana izay mety hiteraka lamina simba.

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