תחי ישראל - אין לנו ארץ אחרת

תחי ישראל -אין לנו ארץ אחרת

מדריך 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:float שנוסיף ל-CSS של האלמנט

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

התכונה clear יכולה לקבל ארבעה ערכים:

• clear:right נקה את הצד הימני מהשפעת ה-float

• clear:left נקה את הצד השמאלי מהשפעת ה-float

• clear:both נקה את הצד הימני והשמאלי מהשפעת ה-float 

• clear:none אל תנקה את השפעת ה-float

 

סיכום float ו-clear

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

 

 

אהבתם? לא אהבתם? דרגו!

0 הצבעות, ממוצע 0 מתוך 5 כוכבים

 

 

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

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

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

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

השימוש שלך באתר מהווה ראייה להסכמתך עם הכללים והתקנות שנוסחו בהסכם תנאי השימוש.

הוסף תגובה חדשה

 

 

ענה על השאלה הפשוטה הבאה כתנאי להוספת תגובה:

דג למים הוא כמו ציפור ל...?