מדריך CSS מספר 15 - איך להשתמש בCSS float

שלבים

1. 1

   שלב 1

   כאשר אנחנו מגדירים את כיוון הfloat של האלמנט (לדוגמא float:right), האלמנט ייצמד לצד הזה בצורה הכי קיצונית שיוכל. לדוגמא:
2. 2

   שלב 2

   
   img {float:left;}

   Some cool Text in our paragraph.
   The text is to the right of the rock picture. This is because the image is defined as float:left.

4. 3

   שלב 3

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

   שלב 4

   אם נגדיר 2 תמונות וערך הCSS float יהיה left, הם יוצגו אחת ליד השניה בצורה מסודרת כל עוד יש מקום בחלון. אם תקטינו את החלון, התמונה השניה תרד תחת הראשונה. נסו להוסיף עוד תמונה לדוגמא הראשונה.
6. 5

   שלב 5

   בכדי למנוע מאלמנטים "לצוף" ליד אובייקט מסוים נשתמש בclear עם הערך both. נשתמש בדוגמא הקודמת ונגדיר את סלקטור פסקה עם clear.
7. 6

   שלב 6

   
   img {float:left;} p {clear:both;);

   Some cool Text in our paragraph.
   The text is to the right of the rock picture. This is because the image is defined as float:left.

8. 7

   שלב 7

   
   כעת, כל אלמנט שיהיה לו את מאפיין הfloat לא יעמוד ליד הפסקה והיא תרד מתחתיו (מכיוון שאלמנט הפסקה מגיע אחרי התמונה בHTML).