Clearfix

Sai sai thiab yooj yim tshem tawm cov ntsiab lus ntab hauv lub thawv los ntawm kev ntxiv cov khoom siv clearfix.

Yooj yim tshem floats los ntawm kev ntxiv .clearfix rau cov niam txiv keeb . Kuj tseem siv tau los ua ib qho mixin.

Siv hauv HTML:

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

Mixin source code:

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

Siv cov mixin hauv SCSS:

.element {
  @include clearfix;
}

Cov piv txwv hauv qab no qhia tau hais tias qhov clearfix siv tau li cas. Yog tsis muaj qhov clearfix lub wrapping div yuav tsis span nyob ib ncig ntawm cov nyees khawm uas yuav ua rau ib tug tawg layout.

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