क्लियरफिक्स

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

मूल तत्व में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>