Clearfix

Ni iyara ati irọrun ko akoonu leefofo kuro ninu apo eiyan kan nipa fifi ohun elo clearfix kan kun.

Ni irọrun ko floats nipa fifi kun .clearfix si nkan obi . Tun le ṣee lo bi apopọ.

Lo ni HTML:

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

Koodu orisun Mixin:

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

Lo apapo ni SCSS:

.element {
  @include clearfix;
}

Awọn wọnyi apẹẹrẹ fihan bi clearfix le ṣee lo. Laisi clearfix awọn murasilẹ div yoo ko igba ni ayika awọn bọtini eyi ti yoo fa kan baje akọkọ.

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