क्लियरफिक्स

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

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

एचटीएमएल में प्रयोग करें:

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

मिश्रण स्रोत कोड:

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

एससीएसएस में मिश्रण का प्रयोग करें:

.element {
  @include clearfix;
}

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