מדריך CSS מספר 20 - פתרון לבעיה נפוצה עם float
למדנו במדריך קודם על השימוש בהצפת אלמנטים (float) כדי לסדר את האלמנטים, אבל השימוש בהצפה צריך להיעשות בזהירות מפני ש-float משפיע גם על האלמנטים שמתחת, ועלול לגרום לתוצאות בלתי רצויות. כדי להדגים את הבעיה נשתמש בקוד הבא, שבונה div , ובתוכו תמונה ושתי פסקאות. את הקוד נעתיק לקובץ ה-html.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png">
<p dir="rtl" class="para_1">
דוגמה להצפה של אלמנט. ראה איך השימוש בהצפה גורם לתמונה לצוף מצד לצד בתוך האלמנט
זו תכונה מאוד חשובה בבנייה ובעיצוב של אתרי אינטרנט
</p>
<p dir="rtl" class="para_2">
הבעיה היא שכשמציפים אלמנט גם אלמנטים שנמצאים מתחתיו מקבלים הצפה
</p>
</div>
</body>
</html>
הדגמת הבעיה שבשימוש ב-float
נכתוב את הקוד הבא לקובץ style.css. המחלקה שמכילה את כל התוכן מקבלת צבע רקע אפור, הפסקה הראשונה צבע צהוב והפסקה השנייה צבע ירוק.
בנוסף הפסקה השנייה מקבלת רוחב של 140 פיקסלים והצפה שמאלה באמצעות float:left.
.container {
background-color: gray;
width: 200px;
padding: 5px;
}
img {
width: 50px;
height: 40px;
}
.para_1 {
background-color: yellow;
width: 140px;
float: left;
}
.para_2 {
background-color: green;
}
כדי לראות את התוצאה נריץ את הקובץ html על הדפדפן:
מה שאפשר לראות זה שהפסקה הירוקה נשאבה כלפי מעלה במקום להימצא מתחת לפסקה הצהובה. זו תוצאה של float:left שהוספנו לפסקה הצהובה.
פתרון הבעיה שבהצפה באמצעות clear
כדי לפתור את הבעיה נשתמש בתכונה clear שמנקה את השפעת ה-float מהפסקה הירוקה. נכתוב מחדש את הקוד בקובץ style.css, כשהפעם הוספנו clear:both לפסקה השנייה:
.container {
background-color: gray;
width: 200px;
padding: 5px;
}
img {
width: 50px;
height: 40px;
}
.para_1 {
background-color: yellow;
width: 140px;
float: left;
}
.para_2 {
background-color: green;
clear: both;
}
נריץ את קובץ ה-html על הדפדפן, ונראה את התוצאה:
אפשר לראות שכשהפעלנו clear:both על הפסקה הירוקה, היא מסתדרת מתחת לפסקה הצהובה, ולא לצידה.
התכונה clear יכולה לקבל ארבעה ערכים:
• clear:right נקה את הצד הימני מהשפעת ה-float
• clear:left נקה את הצד השמאלי מהשפעת ה-float
• clear:both נקה את הצד הימני והשמאלי מהשפעת ה-float
• clear:none אל תנקה את השפעת ה-float
סיכום float ו-clear
שימוש ב-float יוצר בעיה בסידור האלמנטים בדף. כדי לפתור את הבעיה נשתמש בתכונה clear על האלמנט הראשון מתחת לאלמנט שעליו פועל ה-float.
אהבתם? לא אהבתם? דרגו!
0 הצבעות, ממוצע 0 מתוך 5 כוכבים
המדריכים באתר עוסקים בנושאי תכנות ופיתוח אישי. הקוד שמוצג משמש להדגמה ולצרכי לימוד. התוכן והקוד המוצגים באתר נבדקו בקפידה ונמצאו תקינים. אבל ייתכן ששימוש במערכות שונות, דוגמת דפדפן או מערכת הפעלה שונה ולאור השינויים הטכנולוגיים התכופים בעולם שבו אנו חיים יגרום לתוצאות שונות מהמצופה. בכל מקרה, אין בעל האתר נושא באחריות לכל שיבוש או שימוש לא אחראי בתכנים הלימודיים באתר.
למרות האמור לעיל, ומתוך רצון טוב, אם נתקלת בקשיים ביישום הקוד באתר מפאת מה שנראה לך כשגיאה או כחוסר עקביות נא להשאיר תגובה עם פירוט הבעיה באזור התגובות בתחתית המדריכים. זה יכול לעזור למשתמשים אחרים שנתקלו באותה בעיה ואם אני רואה שהבעיה עקרונית אני עשוי לערוך התאמה במדריך או להסיר אותו כדי להימנע מהטעיית הציבור.
שימו לב! הסקריפטים במדריכים מיועדים למטרות לימוד בלבד. כשאתם עובדים על הפרויקטים שלכם אתם צריכים להשתמש בספריות וסביבות פיתוח מוכחות, מהירות ובטוחות.
המשתמש באתר צריך להיות מודע לכך שאם וכאשר הוא מפתח קוד בשביל פרויקט הוא חייב לשים לב ולהשתמש בסביבת הפיתוח המתאימה ביותר, הבטוחה ביותר, היעילה ביותר וכמובן שהוא צריך לבדוק את הקוד בהיבטים של יעילות ואבטחה. מי אמר שלהיות מפתח זו עבודה קלה ?
השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.