הבנת CSS Float

באמצעות CSS לצוף נכס לעיצוב דף אינטרנט פריסות

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

בגיליון סגנונות, המאפיין CSS float נראה כך:

.right {float: right; }

זה אומר לדפדפן כי כל דבר עם הכיתה של "ימין" צריך להיות צף בצד ימין.

היית מקצה את זה ככה:

class = "right" />

מה אתה יכול לצוף עם CSS לצוף נכס?

אתה לא יכול לצוף כל אלמנט בדף אינטרנט. אתה יכול רק לצוף ברמת בלוק אלמנטים. אלה הם האלמנטים שתופסים שטח בלוק בדף, כמו תמונות (), פסקאות (), מחלוקות () ורשימות ().

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

איפה הם צפים?

אתה יכול לצוף אלמנטים ימינה או שמאלה. כל אלמנט הבא את המרכיב הצף יזרם סביב אלמנט צף בצד השני.

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

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

כמה רחוק הם יצפו?

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

עבור דוגמאות אלה, אני יהיה צף אלמנט DIV קטן בצד שמאל:

אתה יכול אפילו להשתמש צף ליצור פריסת גלריה צילום. אתה שם כל תמונה ממוזערת (זה עובד הכי טוב כאשר הם כולם באותו גודל) ב DIV עם הכיתוב לצוף את האלמנטים DIV במיכל.

לא משנה כמה רחב חלון הדפדפן, התמונות הממוזערות יהיה בשורה אחידה.

מכבה את Float

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

בהיר: משמאל;
בהיר: מימין;
תנקה את שניהם;

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

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

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

HTML (חזור על הפסקה הזו):


דואיס aure irure dolor sed לעשות eiusmod זמני incididunt ב rerehenderit ב voluptate. קופידאט לא proident, לאבורה et dolore magna aliqua.

CSS (לצוף את התמונות משמאל):

img.float {float: left;
בהיר: משמאל;
שוליים: 5px;
}

ובצד ימין:

img.float {float: right;
בהיר: מימין;
שוליים: 5px;
}

באמצעות צפים עבור פריסה

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

כל עוד אתה יודע את רוחב (באחוזים הם בסדר) של הסעיפים הפריסה שלך, אתה יכול להשתמש נכס לצוף לשים אותם שם הם שייכים בדף. וזה דבר נחמד, אתה לא צריך לדאוג הרבה על מודל התיבה להיות שונה עבור Internet Explorer או Firefox.