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

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

പാരന്റ് എലമെന്റിലേക്ക്float ചേർത്തുകൊണ്ട് s എളുപ്പത്തിൽ മായ്‌ക്കുക . മിക്സിയായും ഉപയോഗിക്കാം..clearfix

HTML-ൽ ഉപയോഗിക്കുക:

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

മിക്സിൻ സോഴ്സ് കോഡ്:

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

SCSS-ൽ മിക്‌സിൻ ഉപയോഗിക്കുക:

.element {
  @include 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>