Clearfix

Dali ug dali nga paghawan ang naglutaw nga sulud sa sulod sa usa ka sudlanan pinaagi sa pagdugang usa ka gamit sa clearfix.

Sayon nga klaro floatang s pinaagi sa pagdugang .clearfix sa elemento sa ginikanan . Mahimo usab nga gamiton ingon usa ka mixin.

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

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

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

Ang mosunud nga pananglitan nagpakita kung giunsa magamit ang clearfix. Kung wala ang clearfix ang wrapping div dili molibot sa mga buton nga mahimong hinungdan sa usa ka guba nga layout.

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