מיקום מבוסס CSS - חלק ב'
זהו חלק שני של המדריך מיקום מבוסס css.
מודל ההצפה
במודל ההצפה (float) אנו מוציאים אלמנט מהסידור הרגיל ע"י "דחיפתו" ימינה או שמאלה עד לגבול התיבה המכילה אותו.
התכונה float יכולה לקבל אחד מהערכים: none, left, right, או inherit.
כאשר אלמנט מוגדר כ"צף" ע"י שימוש ב float:right או float:left הוא נשאר במיקומו האנכי על פי הסידור הרגיל, אך מוזז אופקית רחוק ככל האפשר לימין או לשמאל בתוך גבולות התיבה המכילה אותו. אלמנטים סמוכים אליו מסוג inline (כמו טקסט למשל) מסתדרים סביב גבולותיו.
הדוגמה הבאה מראה אלמנט צף לצד טקסט.
מהקוד הבא:
<div>
<span style="float:right;width:40%;">
content content content...
</span>
content content content content content content
content content content content content
content content content content content...
</div>
נקבל את התוצאה:
בדוגמה ניתן לראות איך אלמנט ה-span (מוקף מסגרת ירוקה) צף ימינה, בעוד שאר הטקסט מסתדר סביב צלעותיו.
ישנן כמה נקודות שרצוי לשים לב אליהן בנוגע לתיבות צפות: ראשית, תיבה צפה צריכה לקבל הגדרת רוחב (באופן מפורש או משתמע), אחרת היא תמלא את התיבה המכילה לרוחב, ולא תשאיר מקום לאלמנטים אחרים לצידה. שנית, שלא כמו בשיטת המיקום הרגילה, השוליים האופקיים של תיבה צפה אינם מתמזגים עם שולי התיבות מעליה ומתחתיה.
שלישית, תיבה צפה עשויה לחפוף תיבות אחרות המכילות אותה, או סמוכות לה.
בדוגמה הבאה נדגים מצב בו אלמנט צף מכיל טקסט רב ביחס לגודל התיבה המכילה אותו, מה שגורם לו לגלוש אל מחוצה לה:
<p>
<span style="float: right; width: 40%; text-align: left;">
content content content content
content content content content content
</span>
content content content content content
content content content content ...
</p>
<p>
content content content content
content content content content content
content content content content...
</p>
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content
מה קרה כאן? הטקסט בתיבה הצפה מכיל כמות טקסט גדולה יחסית לטקסט בתיבה המכילה אותו. כתוצאה מכך הוא גולש אל מחוץ לתחומה ו"עולה" על הפיסקה הבאה (אם כי הטקסט בפיסקה השניה עדיין מסתדר סביבו).