תכונות CSS הקשורות לציפה
מאמר זה מסביר את תכונות ה-CSS הקשורות לציפה.
ניתן ללמוד על השימושים והתחביר של תכונות ה-float וה-clear.
YouTube Video
HTML לתצוגה מקדימה
css-float.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-float.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Layout Related Properties</h2>
20 </header>
21 <article>
22 <h3>float</h3>
23 <section style="height: auto; color: black;">
24 <header><h4>float: left</h4></header>
25 <section class="sample-view">
26 <div class="float-left">float left</div>
27 <div class="content">
28 <p>
29 paragraph 1-1
30 paragraph 1-2
31 </p>
32 <p>paragraph 2</p>
33 </div>
34 <div class="clearfix"></div>
35 </section>
36 </section>
37 <section style="height: auto; color: black;">
38 <header><h4>float: right</h4></header>
39 <section class="sample-view">
40 <div class="float-right">float right</div>
41 <div class="content">
42 <p>
43 paragraph 1-1
44 paragraph 1-2
45 </p>
46 <p>paragraph 2</p>
47 </div>
48 <div class="clearfix"></div>
49 </section>
50 </section>
51 </article>
52 </main>
53</body>
54</html>תכונות CSS הקשורות לציפה
תכונות float ו-clear
1.content {
2 width: 300px;
3 height: 100px;
4}
5
6.content p {
7 background-color: lightblue;
8 margin: 10px;
9}
10
11.float-left {
12 float: left;
13 width: 150px;
14 margin-right: 20px;
15 background-color: lightblue;
16}
17
18.float-right {
19 float: right;
20 width: 150px;
21 margin-right: 20px;
22 background-color: lightblue;
23}
24
25.clearfix {
26 clear: both;
27 display: none;
28}float היא אחת מתכונות ה-CSS המשמשת להצפת אלמנט לימין או שמאל בתוך אלמנט האב שלו, ומאפשרת לאלמנטים אחרים להקיף אותו. תכונת ה-float משמשת לעתים קרובות למקם תמונות או אלמנטים תיבתיים סביב טקסט, אך השימוש בה פחת כאשר שיטות פריסה חדשות כמו flex ו-grid הפכו לנפוצות.
- במחלקה
float-left, תכונת ה-floatמוגדרת כ-left. האלמנט שהוחל עליו צף לצד השמאלי של אלמנט האב, והאלמנט הבא עוטף אותו מצד ימין. - המחלקה
float-rightמגדירה את המאפייןfloatלערךright. האלמנט שמחילה עליו הצף לצד הימני של ההורה שלו, והאלמנט הבא עוטף סביבו בצד השמאלי. - במחלקה
clearfix, תכונת ה-clearמוגדרת כ-both. השימוש במחלקה זו מונע מהאלמנט הבא לעטוף את האלמנט הצף.
כיצד להשתמש ב-float
ערכים
left: מציף את האלמנט לשמאל, ומאפשר לאלמנטים אחרים לעטוף מצד ימין.right: מציף את האלמנט לימין, ומאפשר לאלמנטים אחרים לעטוף מצד שמאל.none: זו היא הערך ברירת המחדל ולא מציף את האלמנט.inherit: יורש את ערך תכונת ה-floatמאלמנט האב.
תכונת clear
- כאשר משתמשים ב-
float, האלמנט הבא עשוי לעטוף את האלמנט הצף. כדי למנוע זאת, יש להשתמש בתכונתclear. הערכים עבורclearהם כדלקמן:.left: מונע מארגון אלמנטים שצפו לשמאל.ימין: נמנע מאלמנטים הצפים לימין.שניהם: נמנע מאלמנטים הצפים לשני הכיוונים, שמאל וימין.none: מאפשר לאלמנטים לצוף מסביב. זהו הערך המוגדר כברירת מחדל.
הערות
- כאשר משתמשים ב-
float, עשויה להיווצר בעיה שבה גובה האלמנט ההורה מתעלם מגובה האלמנט הצף. כדי להימנע מכך, השתמשו בטכניקתclearfixאו ב-overflow: hidden;על אלמנט ההורה. - בעיצוב רספונסיבי או בפריסות מורכבות,
floatעשוי להיות קשה יותר לניהול בהשוואה ל-flexאוgrid, ולכן מומלץ להשתמש ב-flexאוgrid.
סיכום
float היא טכניקה ישנה ליצירת ציפה של אלמנטים לשמאל או לימין, ומאפשרת לטקסט או לאלמנטים אחרים לעטוף אותם, ולעיתים היא עדיין בשימוש עבור פריסות פשוטות או עטיפת תמונות. עם זאת, ליצירת פריסות גמישות וקלות יותר, מומלץ להשתמש ב-flexbox או grid.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.