ക്ലിയർഫിക്സ്

ഒരു ക്ലിയർഫിക്സ് യൂട്ടിലിറ്റി ചേർത്ത് കണ്ടെയ്‌നറിനുള്ളിൽ ഫ്ലോട്ടുചെയ്‌ത ഉള്ളടക്കം വേഗത്തിലും എളുപ്പത്തിലും മായ്‌ക്കുക.

പാരന്റ് എലമെന്റിലേക്ക്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>