وثائق CSS قابلة للتشغيل: float في CSS

Q: ماذا تفعل clear؟

تنقل clear العنصر إلى ما تحت أي عناصر عائمة سابقة على الجانب المحدد: clear: left أو clear: right أو clear: both. هكذا تمنع المحتوى من الالتفاف بجانب عنصر عائم.

Q: ما هو clearfix؟

حيلة لجعل الأب يحتوي عناصره العائمة، تقليديًا عنصر زائف ::after مع clear: both. اليوم تؤدي display: flow-root على الأب المهمة نفسها في سطر واحد.

ماذا تفعل 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>

الهامش على الصندوق العائم يمنع النص من ملامسته. الهوامش هي طريقة التحكم في تلك الفجوة؛ فالنص نفسه لا يمكن إعطاؤه هامشًا نحو العنصر العائم.

القيم

القيمة	النتيجة
`none` (الافتراضي)	بلا تعويم
`left`	يُدفع إلى الحافة اليسرى
`right`	يُدفع إلى الحافة اليمنى
`inline-start`	يُدفع إلى بداية السطر: اليسار في الإنجليزية، واليمين في العربية أو العبرية
`inline-end`	يُدفع إلى نهاية السطر

تتبع inline-start وinline-end اتجاه الكتابة، فالتخطيط المبني بهما ينعكس بشكل صحيح في الصفحات التي تُقرأ من اليمين إلى اليسار. ويصبح العنصر العائم أيضًا عنصرًا كتليًا: تتحول display: inline إلى block، فتنطبق width وheight حتى على span أو img.

تعويم الصور داخل النص

الاستخدام الكلاسيكي: صورة داخل مقال، والنص ينساب حولها. عوّم واحدة إلى كل جانب:

<!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: «ابدأ تحت أي عنصر عائم سابق على هذا الجانب». استخدمها على العنصر الذي يجب ألا يقع بجانب عنصر عائم، مثل عنوان القسم التالي:

<!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>

العنوان الأول ينحشر بجانب العنصر العائم. والثاني يبدأ تحته. تقبل clear القيم left وright وboth وinline-start وinline-end وnone.

الأب المنهار، وflow-root

العناصر العائمة خارج التدفق العادي، فالحاوية التي كل أبنائها عائمون ليس فيها شيء داخل التدفق فتنهار إلى ارتفاع صفر. وتصبح خلفيتها وحدها خطًا رفيعًا فوق العناصر العائمة:

<!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 سياق تنسيق كتلي جديدًا، يحيط دائمًا بعناصره العائمة. والشيفرة الأقدم تستخدم «clearfix» للنتيجة نفسها:

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

تحتوي overflow: hidden أو auto العناصر العائمة أيضًا، مع أثر جانبي هو القص؛ راجع overflow.

العناصر العائمة ليست للتخطيط

قبل flexbox وgrid كانت تخطيطات الصفحات كاملة تُبنى من أعمدة عائمة، مع clearfix وحسابات عرض في كل مكان. انتهى ذلك العهد: العناصر العائمة لا تستطيع التوسيط، ولا جعل الأعمدة بالارتفاع نفسه، وتنكسر حين يتغير حجم المحتوى. استخدم display: flex أو display: grid للصفوف والأعمدة، واترك float لالتفاف النص حول شيء ما. لتوسيط صورة بدل التفاف النص حولها، راجع كيفية توسيط صورة.

الالتفاف حول شكل

تتيح shape-outside للنص أن يتبع شكلًا بدل مستطيل العنصر العائم. تعمل على العناصر العائمة فقط:

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

أخطاء شائعة

أب ارتفاعه صفر. كل أبنائه عائمون. أضف display: flow-root.
العناصر العائمة للأعمدة أو التنقل. استخدم flexbox أو grid.
توقع وجود float: center. غير موجودة. وسّط باستخدام flexbox أو grid أو margin: 0 auto.
محتوى بعد عنصر عائم يلتف حين يجب ألا يلتف. أعطه clear: both، أو ضع العنصر العائم ونصه في حاوية flow-root.
left وright الفيزيائيتان في موقع متعدد اللغات. استخدم inline-start وinline-end كي ينعكس التخطيط في اللغات التي تُكتب من اليمين إلى اليسار.

الأسئلة الشائعة

ماذا تفعل float في CSS؟

تخرج العنصر من التدفق العادي وتدفعه إلى الحافة اليسرى أو اليمنى لحاويته. والنص والمحتوى السطري الذي يأتي بعده يلتف حوله.

ماذا تفعل clear؟

تنقل clear العنصر إلى ما تحت أي عناصر عائمة سابقة على الجانب المحدد: clear: left أو clear: right أو clear: both. هكذا تمنع المحتوى من الالتفاف بجانب عنصر عائم.

لماذا ارتفاع أب العنصر العائم صفر؟

العناصر العائمة خارج التدفق العادي، فالأب الذي كل أبنائه عائمون ليس فيه محتوى داخل التدفق فينهار. أضف display: flow-root إلى الأب فيكبر ليحتوي عناصره العائمة.

ما هو clearfix؟

حيلة لجعل الأب يحتوي عناصره العائمة، تقليديًا عنصر زائف ::after مع clear: both. اليوم تؤدي display: flow-root على الأب المهمة نفسها في سطر واحد.

هل أستخدم float للتخطيط؟

لا. استُخدمت العناصر العائمة للأعمدة قبل وجود flexbox وgrid. استخدم flexbox أو grid للتخطيط، واترك float لمهمتها الأصلية: التفاف النص حول صورة أو اقتباس بارز.

مفاهيم ذات صلة