Чӣ гуна метавон гардиши матнро дар атрофи тасвир бекор кард?

כדי לבטל את הזרימה של תמונה עם טקסט שהוחלה באמצעות תכונת CSS float, ניתן להשתמש בשיטות הבאות:

1. תכונת clear: משמשת לאלמנט הבא אחר האלמנט הממוקם. מגדירה באיזה צד אסור למקם אלמנטים זורמים.

   • clear: left; - מבטל זרימה משמאל.
   • clear: right; - מבטל זרימה מימין.
   • clear: both; - מבטל זרימה משני הצדדים.

   לדוגמה:

   <img src="image.jpg" style="float: left;">
   <p>טקסט זה יזרום סביב התמונה.</p>
   <div style="clear: both;"></div> <!-- אלמנט זה יבטל את הזרימה -->
   

   /* באופן אלטרנטיבי ב-CSS */
   .clearing-element {
     clear: both;
   }
   

   שימוש ב-clear: both; על אלמנט לאחר תמונה זורמת מבטיח שאלמנט זה וכל הבאים אחריו יתחילו מתחת לתמונה.

2. תכונת overflow: משמשת למכולה ההורה המכילה גם את התמונה הזורמת וגם את הטקסט הזורם.

   • overflow: hidden;
   • overflow: auto;

   ערכים אלה יוצרים הקשר פורמט חדש (BFC) שמכיל אלמנטים זורמים בפנים ההורה.

   לדוגמה:

   <div class="container">
     <img src="image.jpg" style="float: left;">
     <p>טקסט זה יזרום סביב התמונה.</p>
   </div>
   

   .container {
     overflow: hidden; /* או auto */
   }
   

   שיטה זו נקייה יותר כי היא לא דורשת הוספת אלמנט נוסף לניקוי.

3. שימוש ב-display: block; לתמונה ושימוש ב-margin: אם אינך רוצה שהתמונה תזרום מלכתחילה, פשוט אל תשתמש ב-float. במקום זאת, השתמש ב-display: block; וב-margin למיקום.

   img {
     display: block; /* התמונה תתפוס את כל הרוחב לפי ברירת מחדל */
     margin-bottom: 20px; /* מרווח מתחת לטקסט */
   }
   

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