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.

Paggamit sa HTML:

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

Ang mixin source code:

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

Gamita ang mixin sa SCSS:

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

html

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