דלג לתוכן הראשי דלג לניווט במסמכים
Check
in English

Clearfix

נקה במהירות ובקלות תוכן צף בתוך מיכל על ידי הוספת כלי עזר clearfix.

נקה בקלות floats על ידי הוספה .clearfix לאלמנט האב . יכול לשמש גם כמיקסין.

השתמש ב-HTML:

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

קוד המקור של mixin:

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

השתמש במיקסין ב-SCSS:

.element {
  @include clearfix;
}

הדוגמה הבאה מראה כיצד ניתן להשתמש ב-clearfix. ללא ה-clearfix, div העטיפה לא יתפרש סביב הכפתורים, מה שיגרום לפריסה שבורה.

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