Dev-Time

floats vs inline-block

כל מי שקצת יצא לו לבנות layout בסיסי בcss נאלץ להשתמש באחד משתי השיטות שהיום אדבר עליהן.
אנסה לתת הסבר על שתי השיטות, על ההבדלים ביניהן ומתי עדיף להשתמש בשיטה אחת על פני השניה.


אתחיל בFloat שבמקור נועדה למטרה פשוטה – לעטוף פסקת טקסט סביב תמונה, כמו בכל עיתון או כמו בדוגמה שאני מציג למטה שבה כיצד כשאני נותן float: left לתמונה, הטקסט עוטף את התמונה מצד ימין:

See the Pen text float by Matan (@matanyo) on CodePen.

עם הזמן מתכנתים התחילו להשתמש בfloat למטרות נוספות כגון בניית layout ותפריטי nav.
לפני שמשתמשים בfloat צריך לדעת כמה דברים:

1. float מנתק את האלמנט מהlayout, זאת אומרת שהוא לא תופס מקום בעמוד כאלמנט (בדומה לabsolute).
2. בעקבות הניתוק מהlayout, האלמנט ההורה גם לא יקבל את מידותיו של האלמנט.
3. בשביל לפתור את הבעיה, צריך לדאוג  שהאלמנט שיבוא מתחת להורה יקבל clear: both או לחילופין להוסיף אלמנט ישר מתחת.
4. שיטה נוספת לפתרון הינה מתן לאלמנט העוטף overflow: auto וwidth: 100% לאלמנט העוטף.

הנה דוגמא לסעיף מספר 4:

See the Pen float – overflow by Matan (@matanyo) on CodePen.

דרך נוספות ומאוד פופולרית לפתור את הבעיה היא על ידי clearfix, הוספת class עם Pseudo-elements מסוג after: (שתמיד יימצא מתחת לאלמנט) לאלמנט הורה שיקבל את התכונות הבאות:

 

קצת היסטוריה:
לפני כניסת CSS3 היה נהוג לשים תגית <br>  עם clear:both מתחת להורה.


Inline-block

 לדעתי הוא בין הdisplay הנפוצים ביותר, עושים בו שימוש רב ותוכלו לראות אותו כמעט בכל עמוד אינטרנט.
בשונה מblock שנפרס ותופס את כל רוחב ההורה, inline-block מקבל את גודל האלמנט עצמו ובנוסף הmargin של הילדים שלו נכנס פנימה כמזכיר את ההתנהגות של padding.
הנה דוגמה שתוכל לתאר יותר טוב את העניין.

See the Pen block vs inline-block by Matan (@matanyo) on CodePen.

האלמנט העליון לא נפרס על כל רוחב הbody אבל הוא גבוה יותר כיוון שהmargin הדיפולטיבי של התגית <p> נכלל בתוכו.

אציג כעת את אחת הבעיה של inline-block ולאחר מכאן אראה דרכים כיצד להתמודד איתה.
אז ככה – שימו לב בדוגמה למטה. ישנן 4 קוביות שמקבלות 25% (חישוב פשוט 4\100) זאת אומרת שארבעת הקוביות אמורות להיות מסודרת בשורה אחת יפה.

אז למה יש רק 3 קוביות בשורה והאחרונה יורדת למטה?

See the Pen inline-block grid problem by Matan (@matanyo) on CodePen.

תשובה:

הסיבה לכך שהאלמנט האחרון לא נכנס בשורה היא בעקבות רווחים בHTML שלנו אשר נקראים white-space.
תוכלו לראות בדוגמה שיש מרווחים קטנים בין כל אלמנט לאלמנט, זה נראה כמו margin אך זה לא margin אלא white-space.

בגלל שרשמתי בדוגמה את הHTML שלי עם ריווח של שורה בין כל אלמנט, הדפדפן אוטומטית מוסיף רווח אחד ביניהם.

ישנן כמה דרכים להימנע מwhite-space:
אציג כאן רק 2 מתוך כל השיטות האפשריות, את ה2 האלגנטיות ביותר לדעתי.

א. לסדר את הmark-up של אותם אלמנטים בשורה אחת רציפה ללא רווחים.

ב. השיטה שאני מעדיף וחושב שהיא קריאה ואלגנטית יותר – הוספת HTML comment בין כל אלמנט.

 


לסיכום

ראינו כיצד ניתן להשתמש בכל אחת מהשיטות האלו ולמה חשוב לשים לב בכל אחת מהשיטות.
הרבה פעמים ניתן להגיע לאותה תוצאה אך בשיטות אחרות, אני באופן אישי מעדיף להימנע בשימוש בfloat למעט כשאני רוצה לעטוף תמונה בטקסט.
מכמה סיבות פשוטות :
למה להוסיף עוד אלמנטים בDOM שfloat במקרים רבים מחייב אותנו?
במידה והאלמנטים אינם בגובה זהה, ברירת המחדל של float היא יישור השורה כלפי מעלה, בשונה מinline-block אשר מאפשרת שליטה על ידי vertical-align.

מקורות קריאה מומלצים בנושא: 
Fighting the Space Between Inline Block Elements

All About Floats

Float vs Inline-Block

 

מתן יוסף

תמיד מתעניין ורוצה לדעת עוד..
יש לכם משהו לשאול או להעיר?
קישור ללינקדאין שלי ↓

Add comment

Follow

Get every new post delivered to your Inbox

Join other followers