מדריך לציפת (floating) אלמנטים ב - CSS

מהי ציפת אלמנטים (Floating Elements)

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

Ilustration of CSS Box Model

הקוד הבא מדגים כיצד ניתן לשייך את התכונה float לאלמנט כלשהו ובמקרה שלנו לאלמנט מסוג תמונה <img>:


img
{
  float:left;
}

איזה אלמנטים יכולים לצוף?

האלמנטים שיכולים לקבל את התכונה float הם אלמנטים מסוג קופסא. כלומר, אלמנטים שיוצרים סביבם בלוק. אלמנטים כאלה יהיו למשל אלמנטים כגון <div>, <img> וכדומה.


איך אלמנטים צפים?

התכונה float מאפשרת להגדיר ציפת אלמנטים רק לימין או לשמאל. תכונה זו אינה מאפשרת למשל ציפת אלמנטים למעלה או למטה. באיור הבא ניתן לראות דוגמה לציפת אלמנטים לשמאל ולימין:

Ilustration of CSS Box Model

דוגמה לציפה לימין
img {float:right;}
דוגמה לציפה לשמאל
div {float:left;}

   

להלן טבלה המרכזת את כל הערכים שהתכונה float מקבלת:

תכונה ערכים הסבר
float inherit האלמנט יורש את תכונות הציפה שלו מהאלמנט שבתוכו הוא מקנן.
left האלמנטים משמאל לאלמנט המקבל ערך זה יצופו.
none ערך ברירת המחדל. האלמנטים לפני ואחרי האלמנט המקבל ערך זה לא יצופו.
right האלמנטים מימין לאלמנט המקבל ערך זה יצופו.

כיבוי ציפת אלמנטים

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

תכונה זו יכולה לקבל את הערכים הבאים:

תכונה ערכים הסבר
clear both לא תתאפשר ציפת אלמנטים מימין  או משמאל לאלמנט המקבל ערך זה.
inherit האלמנט יורש את תכונות הציפה או אי הציפה שלו מהאלמנט שבתוכו הוא מקנן.
left לא תתאפשר ציפת אלמנטים משמאל לאלמנט המקבל ערך זה.
none ערך ברירת המחדל. ציפת אלמנטים תתאפשר משני צדי האלמנט המקבל ערך זה.
right לא תתאפשר ציפת אלמנטים מימין לאלמנט המקבל ערך זה.

להלן דוגמת קוד לשימוש בתכונה clear:

img{clear:both;}

שילוב בין תמונה לטקסט בעזרת ציפה

בדוגמה הבאה נגרום לכך שתמונה תצוף לשמאל ואילו הטקסט שלידה יקיף אותה משלושה עברים. לשם כך נגדיר כי על התמונה לצוף לשמאל. דבר זה יגרום לתמונה להיצמד עד הסוף לשמאל. לאחר מכן כל שעלינו לעשות הוא להקיפה בטקסט משלושה עברים פשוט על ידי כתיבת הטקסט בתוך אלמנטו HTMLכגון <p> או <div> וכדומה.

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

<html>
<head>
<style type="text/css">
#fleft
{
float:left;
}
h2{text-align:center;}
</style>
</head>

<body>

<h2>Floating Image and Text</h2>

<div>
<img id="fleft" src="logo.png">
The best online development school.
Devschool the best online development school.
Devschool the best online development school.
Devschool the best online development school.
Devschool the best online development school.
Devschool the best online development school.
Devschool the best online development school.
Devschool the best online development school.
Devschool the best online development school.
Devschool the best online development school.
Devschool the best online development school.
</div>

</body>
</html>

   

הגדלת האות הראשונה במאמר בעזרת ציפה

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

<html>
<head>
<style type="text/css">
span
{
  float:left;
  width:8%;
  font-size:280%;
  font-family:ariel;
  line-height:80%;
}
</style>
</head>

<body>
<p>
    <span>T</span>he best online school for developers.
  The best online school for developers.
  The best online school for developers.
  The best online school for developers.
  The best online school for developers.
  The best online school for developers.
  The best online school for developers.
  The best online school for developers.
</p>
</body>
</html>

   


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש