נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

לחיצה חוזרת ונשנית על המקש Tab תעביר אתכם בין הקישורים והאזורים השונים בעמוד.

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

מדריך 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. 

 

 

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

 

= 6 + 8