Source

کلیئر فکس

کلیئر فکس یوٹیلیٹی شامل کر کے کنٹینر کے اندر تیرے ہوئے مواد کو جلدی اور آسانی سے صاف کریں۔

پیرنٹ عنصر میں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 بٹنوں کے گرد نہیں پھیلے گا جس کی وجہ سے ترتیب ٹوٹ جائے گی۔

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