Articles
מבוא ל-CSS
תכונות CSS הקשורות לציפה

תכונות 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        </article>
38    </main>
39</body>
40</html>

תכונות CSS הקשורות לציפה

תכונות float ו-clear 

 1.float-left {
 2    float: left;
 3    width: 150px;
 4    margin-right: 20px;
 5    background-color: lightblue;
 6}
 7
 8.content {
 9    width: 300px;
10    height: 100px;
11}
12
13.content p {
14    background-color: lightblue;
15    margin: 10px;
16}
17
18.clearfix {
19    clear: both;
20    display: none;
21}

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

  • במחלקה float-left, תכונת ה-float מוגדרת כ-left. האלמנט שהוחל עליו צף לצד השמאלי של אלמנט האב, והאלמנט הבא עוטף אותו מצד ימין.
  • במחלקה 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 בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות CSS הקשורות לממשק המשתמש