המאפיין CSS ברור כבר חלק CSS מאז CSS1. זה מאפשר לך לציין אילו אלמנטים יכולים לצוף לצד האלמנט מסומנת על איזה צד (ים). לנכס הברור יש חמישה ערכים אפשריים:
- אף אחד
- שמאלה
- ימין
- שניהם
- לָרֶשֶׁת
כיצד להשתמש CSS ברור נכס
הדרך הנפוצה ביותר להשתמש המאפיין ברור הוא לאחר שהשתמשת רכוש צף על אלמנט. לדוגמה:
טקסט ליד התמונה שלי.
טקסט שמתחת לתמונה שלי.
כל האלמנטים המשמשים כברירת מחדל לניקוי: none; , אז אם אתה לא רוצה אלמנטים אחרים לצוף ליד משהו, אתה חייב לשנות את הסגנון הברור.
כאשר אתה מסיר את צף, אתה מתאים שלך ברור לצוף שלך. אז אם אתה צף את הרכיב שמאלה, אז אתה צריך לפנות שמאלה. אלמנט הצף שלך ימשיך לצוף, אבל האלמנט מסומנת והכל אחרי זה יופיע מתחתיה בדף האינטרנט.
אם יש לך אלמנטים שצופים הן מימין והן שמאלה, אתה יכול לנקות רק צד אחד או שאתה יכול לנקות את שניהם.
שימוש בפריסות ברורות
הדרך הנפוצה ביותר שרוב המעצבים משתמשים בנכס הברור נמצאת בפריסה של אלמנטים בדף . ייתכן שיש לך תמונה שצפה בתוך גוש טקסט ורוצה שהפסקה הבאה תתחיל מתחת לתמונה, או שיש לך עמוד שלם של טקסט שברצונך לצוף לצד חבורה אחרת של טקסט, כאשר חלק מהטקסט מופיע למטה.
הנה HTML עבור פריסה בטופס זה.
יש לו מיכל אחד div מחזיק אחר כי הוא צף משמאל.
דיף צף קצר
תוכן בתוך div מכולה כי הם הולכים להיות בצד ימין של div צף.
זה יעבוד בסדר, עם div קצר יותר צף בצד שמאל של שאר התוכן של div הראשי.
אתה יכול לנקות את הטקסט ליד תיבת צף פשוט על ידי הוספת תג שבו אתה רוצה שזה יתחיל לכתוב מתחת לקופסה צפה.
אבל הבעיה מגיעה כאשר תיבת צף ארוך יותר את התוכן שלצידה. ואז, כפי שאתה יכול לראות, את צבע הרקע של התיבה הראשית לא מתבצעת למטה לתחתית תיבת צף.
למרבה המזל, יש דרך קלה לתקן את זה: את הנכס. על ידי הגדרת התיבה הראשית להצפה: אוטומטי; צבע הרקע יישאר ליד התיבה המצפה ארוכה יותר לתחתית, כפי שמוצג בדוגמה זו .