क्लियरफिक्स

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