ਕਲੀਅਰਫਿਕਸ

ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ ਵਿੱਚfloat ਜੋੜ ਕੇ s ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਸਾਫ਼ ਕਰੋ । ਇੱਕ ਮਿਸ਼ਰਣ ਦੇ ਤੌਰ ਤੇ ਵੀ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ..clearfix

HTML ਵਿੱਚ ਵਰਤੋਂ:

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

ਮਿਸ਼ਰਣ ਸਰੋਤ ਕੋਡ:

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

SCSS ਵਿੱਚ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰੋ:

.element {
  @include clearfix;
}

ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਦਿਖਾਉਂਦਾ ਹੈ ਕਿ ਕਲੀਅਰਫਿਕਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ। ਕਲੀਅਰਫਿਕਸ ਤੋਂ ਬਿਨਾਂ ਰੈਪਿੰਗ ਡਿਵ ਬਟਨਾਂ ਦੇ ਦੁਆਲੇ ਨਹੀਂ ਫੈਲੇਗੀ ਜਿਸ ਨਾਲ ਟੁੱਟੇ ਹੋਏ ਖਾਕੇ ਦਾ ਕਾਰਨ ਬਣੇਗਾ।

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