عرض مصدر CSS/float

<noinclude>{{DISPLAYTITLE:الخاصية <code>float</code>}}</noinclude>
الخاصية <code>float</code> في CSS تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها، مما يسمح للنص والعناصر السطرية بالالتفاف حول العنصر، وسيُزال هذا العنصر من الهيكل التنظيمي (flow) العادي للصفحة، لكنه سوف يبقى جزءًا منه (على عكس العناصر ذات الموضع المطلق [absolute]).

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر، لكن لن يكون لهذه الخاصية أثر إن كانت قيمة الخاصية <code>[[CSS/display|display]]</code> تساوي <code>none</code>.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}
ولمّا كانت الخاصية <code>float</code> تُشير إلى التخطيط الكتلي (block layout)، فستُغيّر القيمة المحسوبة للخاصية <code>[[CSS/display|display]]</code> في بعض الحالات:
{| class="wikitable"
!القيمة المُحدَّدة
!القيمة المحسوبة
|-
|<code>inline</code>
|<code>block</code>
|-
|<code>inline-block</code>
|<code>block</code>
|-
|<code>inline-table</code>
|<code>table</code>
|-
|<code>table-row</code>
|<code>block</code>
|-
|<code>table-row-group</code>
|<code>block</code>
|-
|<code>table-column</code>
|<code>block</code>
|-
|<code>table-column-group</code>
|<code>block</code>
|-
|<code>table-cell</code>
|<code>block</code>
|-
|<code>table-caption</code>
|<code>block</code>
|-
|<code>table-header-group</code>
|<code>block</code>
|-
|<code>table-footer-group</code>
|<code>block</code>
|-
|<code>flex</code>
|<code>flex</code>، لكن لن يكون للخاصية <code>float</code> أثرٌ على تلك العناصر.
|-
|<code>inline-flex</code>
|<code>inline-flex</code>، لكن لن يكون للخاصية <code>float</code> أثرٌ على تلك العناصر.
|-
|غير ذلك
|لا تغيير على القيمة المحسوبة.
|}

ويمكن تعريف العنصر العائم (floating element) على أنَّه العنصر الذي تكون قيمة الخاصية <code>float</code> لا تساوي <code>none</code>.<syntaxhighlight lang="css">
/* الكلمات المفتاحية */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* القيم العامة */
float: inherit;
float: initial;
float: unset;
</syntaxhighlight>

== أمثلة ==
وكما ذكرنا أعلاه، عندما يتم تعويم العنصر فسينزع من الهكيل التنظيمي العادي للمستند (لكنه يبقى جزءًا منه)، ويمكن نقله إلى اليسار أو اليمين حتى يلمس حافة الصندوق الحاوي عليه أو عنصر عائم آخر.

في المثال الآتي هنالك ثلاثة مربعات، اثنان منهما عائمان إلى اليسار، وواحدٌ إلى اليمين، لاحظ أنَّ المربع المعوّم إلى اليسار الثاني سيكون على يمين المربع الأول، لاحظ أنَّ المربعات الإضافية ستتكدس على اليمين حتى تملأ الصندوق الحاوي عليها وبعد ذلك ستلتف إلى السطر التالي.

شيفرة HTML:<syntaxhighlight lang="html">
<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.

  </p>
</section>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
section {
  border: 1px solid blue;
}

div {
  margin: 5px;
  width: 50px;
  height: 50px;
  color: white;
  text-align: center;
}

.left {
  float: left;
  background-color: salmon;
}

.right {
  float: right;
  background: #006699;
}
</syntaxhighlight>
=== إفراغ مكان العناصر العائمة ===
في بعض الأحيان تريد أن ينتقل أحد العناصر تحت العناصر العائمة، فمثلًا، قد تريد أن تبقى الفقرات النصية بجوار العناصر العائمة، لكنك تريد أن تكون العناوين في سطرٍ خاصٍ بها، فعندئذٍ يمكنك استخدام الخاصية <code>[[CSS/clear|clear]]</code> (راجع صفحتها لأمثلة عن ذلك).

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0
|1.0
|4.0
|7.0
|1.0
|}

== البنية العامة ==
تقبل الخاصية <code>float</code> كلمةً محجوزةً وحيدةً من الكلمات المذكورة في هذا القسم.
===  <code>left</code> ===
سيكون العنصر عائمًا على الجانب الأيسر من الصندوق الحاوي له.
===  <code>right</code> ===
سيكون العنصر عائمًا على الجانب الأيمن من الصندوق الحاوي له.
===  <code>none</code> ===
لا يجوز أن يكون العنصر عائمًا.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
float: none | left | right;
</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيفية تموضع العنصر في المستند.
* صفحة الخاصية <code>[[CSS/display|display]]</code>  التي تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-logical-props/#float-clear CSS Logical Properties Level 1]. أضافت هذه المسودة القيم <code>inline-start</code> و <code>inline-end</code>، لكنها غير مدعومة إلا من قلّة قليلة من المتصفحات.
* مسودة [https://drafts.csswg.org/css-box-3/#float CSS Basic Box Model].
* مواصفة ‎[http://www.w3.org/TR/CSS2/visuren.html#float-position CSS Level 2 (Revision 1)‎].
* مواصفة [http://www.w3.org/TR/CSS1/#float CSS Level 1]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Positioning|{{SUBPAGENAME}}]]