கிளியர்ஃபிக்ஸ்

மூல உறுப்பில்float சேர்ப்பதன் மூலம் களை எளிதாக அழிக்கவும் . மிக்ஸினாகவும் பயன்படுத்தலாம்..clearfix

HTML இல் பயன்படுத்தவும்:

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

மிக்சின் மூல குறியீடு:

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

SCSS இல் மிக்சினைப் பயன்படுத்தவும்:

.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>