Source

क्लियरफिक्स

क्लीयरफ़िक्स यूटिलिटी को जोड़कर कंटेनर के भीतर फ़्लोट की गई सामग्री को तेज़ी से और आसानी से साफ़ करें।

मूल तत्व मेंfloat जोड़कर आसानी से साफ़ करें । मिश्रण के रूप में भी इस्तेमाल किया जा सकता है।.clearfix

<div class="clearfix">...</div>
// Mixin itself
@mixin clearfix() {
  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

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

निम्न उदाहरण दिखाता है कि कैसे 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>