ਕਲੀਅਰਫਿਕਸ

ਇੱਕ ਕਲੀਅਰਫਿਕਸ ਉਪਯੋਗਤਾ ਜੋੜ ਕੇ ਇੱਕ ਕੰਟੇਨਰ ਦੇ ਅੰਦਰ ਫਲੋਟ ਕੀਤੀ ਸਮੱਗਰੀ ਨੂੰ ਜਲਦੀ ਅਤੇ ਆਸਾਨੀ ਨਾਲ ਸਾਫ਼ ਕਰੋ।

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

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

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

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

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

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