שימוש במאפיין Clearfix יכול להתאים אוטומטית את רכיב האב בהתאם לאלמנט הבן ולתקן את הבעיות בקוד HTML באמצעות כמה תכונות כמו ' הצפה ' השולט בממדים של רכיבי האב והילד מבלי לדרוש סימון נוסף.
שימוש בנכס Clearfix
בואו נבין את השימוש במאפיין clearfix כדי לדעת מה הוא עושה לפלט על ידי הוספת מאפיין CSS clearfix בקטע קוד HTML:
ללא Clearfix Property
בואו נריץ קטע קוד מבלי להפעיל את המאפיין clearfix כדי להבין את סוג הבעיות ש-clearfix מסוגל לפתור:
צור מחלקה ב-HTML שמכניסה תמונה למיכל div:
< div מעמד = 'תיקון ברור' >
< br >< img מעמד = 'אימג' src = 'image.png' הכל = 'תמונה' רוֹחַב = '250' גוֹבַה = '180' >
טֶקסט...
< / div >
להלן קוד ה-CSS עבור ה-HTML שלמעלה:
<סגנון >
.clearfix {
גבול : 3 פיקסלים מוצק #2baa12 ;
ריפוד : 5 פיקסלים ;
}
.img {
לָצוּף : שמאלה ;
}
>
זה יפיק את הפלט בצורה כזו שהכיתה הילדית המכילה את התמונה תעלה על גדותיה מחוץ לקונטיינר. במצבים כאלה, ניתן להשתמש במאפיין clear fix כדי לנקות או לתקן בעיה זו בקלות:
עם Clearfix Property
כדי לתקן את הבעיה, אנחנו יכולים פשוט להוסיף הצפה תכונה עם הערך שווה ל אוטומטי שיתאים את מיכל האב בהתאם לגודל האלמנט הבן:
<סגנון >.clearfix {
גבול : 3 פיקסלים מוצק #2baa12 ;
ריפוד : 5 פיקסלים ;
}
.clearfix {
הצפה : אוטומטי ;
}
.img {
לָצוּף : שמאלה ;
}
>
כאן בקטע הקוד הזה, מחלקת האב היא המיכל והתמונה מוכנסת למחלקת הילד שלה:
< div מעמד = 'תיקון ברור' >< br >< img מעמד = 'אימג' src = 'image.png' הכל = 'תמונה' רוֹחַב = '250' גוֹבַה = '180' >
טֶקסט...
< / div >
הוספת מאפיין clearfix תרחיב אוטומטית את רכיב האב (מיכל) בהתאם לגודל האלמנט הבן שהוא התמונה שהוכנסה:
כך עובד מאפיין Clearfix ב-HTML.
סיכום
מאפיין clearfix משמש כדי להתאים את רכיבי הצאצא ב-HTML על פי רכיבי האב עם מאפיין clearfix פשוט ללא צורך בסימונים נוספים. שימוש ב-CSS Clearfix מגדיל או מקטין את הממדים של רכיבי האב כדי להתאים אותם בהתאם לממדים של רכיבי הילד.