הסבר על float-ים

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

המצגת גם מתארת בעיות שאלמנטים צפים יכולים ליצור, ופתרונות אפשריים – עם הסבר למה הפתרונות עובדים!

א-פרופו זה, אחת הבעיות הידועות היא ש”הורה” של אלמנטים צפים כבר לא מכיר אותם, ולכן נעלם (אני נוהגת להסביר זאת כך: הילדים יצאו מה-flow, עזבו את דרך הישר, וכמחאה – ההורים לא מכירים בהם יותר…). הפתרון שאני משתמשת בו הוא שימוש ב-class של clearfix. לאחרונה, התוודעתי לפורמט קטן יותר של מימוש ה-clearfix:

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}

.cf:after {
    clear: both;
}

אפשר לקרוא את ההסבר על זה כאן.