CSS Floats המוסברים 5 שאלות

CSS "Floats" (אלמנטים צפים) הם פשוט לשימוש אבל פעם בשימוש, את האפקט שיש לו על אלמנטים סביבו לפעמים לקבל בלתי צפוי. אם אי פעם נתקלת בבעיות של היעלמות אלמנטים סמוכים או צפים כי לדחוף כמו אגודל כואבת, לא לדאוג יותר.

פוסט זה מכסה חמש שאלות בסיסיות שיעזרו לך להיות מומחה אלמנטים צפים.

1. אילו אלמנטים אינם צפים?
2. מה קורה אלמנט כאשר הוא צף?
3. מה קורה לאחים של "מרחפים"?
4. מה קורה להורה של "Float"?
5. איך לנקות את "צף"?

עבור הקוראים המוסיפים את גישת ה- TL לחיים, יש סיכום קרוב לסוף הפוסט.

1. אילו אלמנטים אינם צפים?

An מוחלטת או אלמנט מיקום קבוע לא לצוף. אז בפעם הבאה שאתה נתקל לצוף זה לא עובד, לבדוק אם הוא נמצא משרה מוחלטת או מיקום: קבוע ולהחיל שינויים בהתאם.

2. מה קורה אלמנט כאשר הוא צף?

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

אלמנטים צפים גם לא ילך מעל האלמנטים לפני זה בקוד, משהו שעליך לשקול לפני קידוד a “לצוף” לאחר אלמנט שבו אתה רוצה לצוף אותו.

הנה עוד שני דברים שקורים אלמנט צף תלוי איזה סוג של רכיב הוא המשיך להיות צף:

(1) אלמנט מוטבע יהפוך לאלמנט ברמה של בלוק כאשר צף.

תהית פעם למה פתאום אתה יכול להקצות גובה & רוחב לצוף span? הסיבה לכך היא כי כל האלמנטים כאשר צף יקבלו את הערך בלוק J להציג מאפייניםinline-table יקבל שולחן) מה שהופך אותם אלמנטים ברמה בלוק.

(2) רכיב בלוק של רוחב לא מוגדר יקטן כך שיתאים לתוכן שלו בעת הצפייה.

בדרך כלל, כאשר אינך מציין רוחב אלמנט בלוק, הרוחב שלו הוא ברירת המחדל של 100%. אבל כאשר צף, זה כבר לא המקרה; תיבת האלמנט של הבלוק תתכווץ עד שתכולתו תישאר גלויה.

3. מה קורה לאחים של "צפים"?

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

"Floats" יש אחים ואחרות ואחרות ואחרות ביותר בעולם. הם יעשו כל שביכולתם כדי להכיל אלמנט צף.

ה טקסט ואלמנטים מוטבעים פשוט לפנות את הדרך "Floats" ו יקיף את "Float" כאשר הוא נמצא במצב.

ה אלמנטים לחסום ילך צעד נוסף ויהיה לעטוף את עצמם סביב "Float" בנדיבות, גם אם זה אומר לבעוט את אלמנטים הילד שלהם כדי לפנות מקום עבור "Float".

בואו נבדוק את זה בניסוי. למטה יש קופסה כחולה ואחרי זה תיבה אדומה באותו גודל עם כמה אלמנטים הילד.

עכשיו, בואו לצוף את הקופסה הכחולה, ולראות מה קורה לתיבה האדומה ולילדיה.

הכל יהיה בסדר פעם אחת את התיבה האדומה מפסיק לחבק את התיבה הכחולה ועל זה אתה יכול להשתמש overflow: מוסתר.

כאשר תוסיף overflow: מוסתר אל אלמנט שעטף צף, הוא יפסיק לעשות זאת. ראה להלן כיצד מתנהגת תיבת אדום עם overflow: מוסתר.

4. מה קורה להורה של "Float"?

להורים לא אכפת הרבה מהילדים שלהם, אלא שהם לא צריכים לצאת מגבולות השמאל או הימין שלהם.

בדרך כלל אלמנט בלוק בגובה לא מוגדר מגדיל את גובהו כדי להתאים את האלמנטים של הילד שלו, אבל זה לא המקרה של ילדים "Float". אם גודל "Float" יגדל, ההורה לא יגדיל את גובהו בהתאם. זה שוב ניתן לפתור באמצעות overflow: מוסתר בהורה.

5. כיצד לנקות "צף"?

כבר הזכרתי שימוש overflow: מוסתר כדי להפוך את ההורה גובה חכם להתאים לילד צף תוך יצירת השטח הנכון עבור אלמנטים אחרים לאחר "Float" ולהפסיק את האחים מן גלישת "Floats.

וכך אתה עושה אלמנט חי ליד "Float" ללא פשרות.

יש שיטה אחרת שבה האלמנטים אפילו לא יהיו בשום מקום ליד האחים "Float" שלהם. באמצעות ברור תכונה אתה יכול לעשות אלמנט חופשי מלהיות ליד "Float".

בהיר: משמאל; בהיר: מימין; תנקה את שניהם; 

שמאלה ערך מנקה את כל "צף" בצד שמאל של אלמנט, ולהיפך ימין, ועל שני הצדדים שניהם. זה ברור תכונה ניתן להשתמש על אח, div ריק או על יסוד pseudo לפי נוח שלך.

סיכום

1. אלמנטים מוחלטים / קבועים לא יצפו.
2. "Float" לא הולך מעל האלמנט לפני זה בקוד.
3. אם אין מספיק מקום במיכל, "Float" יידחף כלפי מטה.
4. כל "צף" מיוצרים אלמנטים ברמת בלוק.
5. אם רוחב לא צוין על "Float", זה יהיה להתכווץ כדי להתאים את התוכן.
6. אחים מאוחרים יותר של "Float" יהיה גם להקיף אותם (inline & טקסט) או לעטוף אותם (בלוקים).
7. כדי לעצור רכיב מעטיפת "Float", השתמש overflow: מוסתר.
8. ההורים של "Float" ים לא יגדיל את גובהו כדי להתאים לצוף.
9. כדי להפוך את האב להגדלת גובהו לפי "Float", השתמש overflow: מוסתר (או ליצור אח עם ריק ברור אחרי זה)
10. כדי למנוע אלמנט להיות ליד כל "Float" להשתמש ברור תכונה.