תיעוד CSS עם דוגמאות להרצה: Float ו-Clear

Q: מה clear עושה?

clear מזיז אלמנט אל מתחת לכל float קודם בצד שצוין: clear: left, clear: right או clear: both. כך מונעים מתוכן לעטוף float ולשבת לצידו.

מה float עושה

float דוחף אלמנט לצד אחד של המכל שלו ומאפשר לטקסט שבא אחריו לעטוף אותו:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Float</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .photo {
      float: left;
      width: 120px; height: 90px;
      margin: 4px 16px 8px 0;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo"></div>
  <p id="text">The box on the left is floated. This paragraph comes after it in the HTML, and its lines flow around the float instead of starting below it. Once the text passes the bottom of the float, the lines go back to the full width of the container, as you can see at the end of this paragraph when it is long enough to wrap below.</p>
</body>
</html>

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

הערכים

ערך	תוצאה
`none` (ברירת מחדל)	אין float
`left`	נדחף לקצה השמאלי
`right`	נדחף לקצה הימני
`inline-start`	נדחף לתחילת השורה: שמאל באנגלית, ימין בערבית או בעברית
`inline-end`	נדחף לסוף השורה

inline-start ו-inline-end עוקבים אחרי כיוון הכתיבה, כך שפריסה שנבנתה איתם מתהפכת נכון בעמודים מימין לשמאל. אלמנט עם float גם הופך לבלוק: display: inline הופך ל-block, כך ש-width ו-height חלים גם על span או img.

תמונות עם float בתוך טקסט

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Floated images</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; font-size: 15px; }
    img { width: 110px; height: 80px; }
    .start { float: inline-start; margin-inline-end: 14px; }
    .end { float: inline-end; margin-inline-start: 14px; }
  </style>
</head>
<body>
  <p>
    <img class="start" alt="Blue square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%232563eb'/%3E%3C/svg%3E">
    This image floats to the start of the line. The text of the paragraph wraps around it on the other side, and continues under it once the image ends. Floats are still the simplest tool for this magazine style layout.
  </p>
  <p>
    <img class="end" alt="Amber square" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='80'%3E%3Crect width='110' height='80' fill='%23f59e0b'/%3E%3C/svg%3E">
    This one floats to the end of the line instead. Change the direction of the page to right to left and both images switch sides with the text, because the floats use logical values.
  </p>
</body>
</html>

clear: להפסיק את העטיפה

clear אומר "התחל מתחת לכל float קודם בצד הזה". השתמשו בו על האלמנט שלא אמור לשבת לצד float, כמו הכותרת של החלק הבא:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Clear</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.5; max-width: 520px; }
    .box { float: left; width: 110px; height: 110px; margin-inline-end: 12px; background: #bbf7d0; border: 2px solid #16a34a; }
    h3 { margin: 8px 0; padding: 4px 8px; background: #e5e7eb; }
    .cleared { clear: both; }
    .demo { display: flow-root; margin-bottom: 20px; } /* keeps the two demos apart */
  </style>
</head>
<body>
  <div class="demo">
    <div class="box" id="box1"></div>
    <p>A short paragraph next to the float.</p>
    <h3 id="h1">This heading is not cleared</h3>
  </div>
  <div class="demo">
    <div class="box" id="box2"></div>
    <p>A short paragraph next to the float.</p>
    <h3 class="cleared" id="h2">This heading has clear: both</h3>
  </div>
</body>
</html>

הכותרת הראשונה נדחסת לצד ה-float. השנייה מתחילה מתחתיו. clear מקבל left, right, both, inline-start, inline-end ו-none.

ההורה הקורס, ו-flow-root

Floats נמצאים מחוץ לזרימה הרגילה, ולכן למכל שכל הילדים שלו עם float אין שום דבר בזרימה, והוא קורס לגובה אפס. הרקע והגבול שלו נשארים כקו דק מעל ה-floats:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contain floats</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .parent { border: 3px solid #dc2626; background: #fee2e2; margin-bottom: 110px; }
    .fixed { border-color: #16a34a; background: #dcfce7; margin-bottom: 0; }
    .child { float: left; width: 90px; height: 80px; margin: 6px; background: #fde68a; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent" id="broken">
    <div class="child">float</div><div class="child">float</div>
  </div>
  <div class="parent fixed" id="fixed">
    <div class="child">float</div><div class="child">float</div>
  </div>
</body>
</html>

display: flow-root יוצר block formatting context חדש, שתמיד עוטף את ה-floats שלו. קוד ישן יותר משתמש ב-"clearfix" לאותה תוצאה:

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

גם overflow: hidden או auto מכילים floats, עם תופעת לוואי של חיתוך; ראו overflow.

Floats הם לא לפריסה

לפני flexbox ו-grid, פריסות עמוד שלמות נבנו מעמודות עם float, עם clearfix וחישובי רוחב בכל מקום. התקופה הזאת נגמרה: floats לא יכולים למרכז, לא יכולים ליצור עמודות באותו גובה, ונשברים כשגודל התוכן משתנה. השתמשו ב-display: flex או ב-display: grid לשורות ולעמודות, ושמרו את float לעטיפת טקסט סביב משהו. כדי למרכז תמונה במקום לעטוף אותה בטקסט, ראו איך ממרכזים תמונה.

עטיפה סביב צורה

shape-outside מאפשר לטקסט לעקוב אחרי צורה במקום אחרי המלבן של ה-float. הוא עובד רק על אלמנטים עם float:

.avatar {
  float: left;
  width: 120px; height: 120px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-inline-end: 16px;
}

טעויות נפוצות

הורה בגובה אפס. לכל הילדים שלו יש float. הוסיפו display: flow-root.
Floats לעמודות או לניווט. השתמשו ב-flexbox או ב-grid.
ציפייה ל-float: center. הוא לא קיים. מרכזו עם flexbox, grid או margin: 0 auto.
תוכן אחרי float שעוטף אותו כשהוא לא אמור. תנו לו clear: both, או שימו את ה-float והטקסט שלו במכל flow-root.
left ו-right פיזיים באתר רב לשוני. השתמשו ב-inline-start וב-inline-end כדי שהפריסה תתהפך בשפות מימין לשמאל.

שאלות נפוצות

מה float עושה ב-CSS?

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

מה clear עושה?

clear מזיז אלמנט אל מתחת לכל float קודם בצד שצוין: clear: left, clear: right או clear: both. כך מונעים מתוכן לעטוף float ולשבת לצידו.

למה ההורה של אלמנט עם float הוא בגובה אפס?

Floats נמצאים מחוץ לזרימה הרגילה, ולכן להורה שיש לו רק ילדים עם float אין תוכן בזרימה, והוא קורס. הוסיפו display: flow-root להורה, והוא יגדל כדי להכיל את ה-floats שלו.

מה זה clearfix?

טריק שגורם להורה להכיל את ה-floats שלו, באופן מסורתי פסאודו-אלמנט ::after עם clear: both. היום display: flow-root על ההורה עושה את אותה העבודה בשורה אחת.

כדאי להשתמש ב-float לפריסה?

לא. Floats שימשו לעמודות לפני ש-flexbox ו-grid היו קיימים. השתמשו ב-flexbox או ב-grid לפריסה, ושמרו את float לתפקיד המקורי שלו: עטיפת טקסט סביב תמונה או ציטוט מודגש.

מושגים קשורים