الخاصية float

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

بطاقة الخاصية

القيمة الابتدائية	none
تُطبَّق على	جميع العناصر، لكن لن يكون لهذه الخاصية أثر إن كانت قيمة الخاصية display تساوي none.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

ولمّا كانت الخاصية float تُشير إلى التخطيط الكتلي (block layout)، فستُغيّر القيمة المحسوبة للخاصية display في بعض الحالات:

القيمة المُحدَّدة	القيمة المحسوبة
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-cell	block
table-caption	block
table-header-group	block
table-footer-group	block
flex	flex، لكن لن يكون للخاصية float أثرٌ على تلك العناصر.
inline-flex	inline-flex، لكن لن يكون للخاصية float أثرٌ على تلك العناصر.
غير ذلك	لا تغيير على القيمة المحسوبة.

ويمكن تعريف العنصر العائم (floating element) على أنَّه العنصر الذي تكون قيمة الخاصية float لا تساوي none.

/* الكلمات المفتاحية */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

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

أمثلة

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

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

شيفرة HTML:

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

  </p>
</section>

شيفرة 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;
}

إفراغ مكان العناصر العائمة

في بعض الأحيان تريد أن ينتقل أحد العناصر تحت العناصر العائمة، فمثلًا، قد تريد أن تبقى الفقرات النصية بجوار العناصر العائمة، لكنك تريد أن تكون العناوين في سطرٍ خاصٍ بها، فعندئذٍ يمكنك استخدام الخاصية clear (راجع صفحتها لأمثلة عن ذلك).

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	7.0	1.0

البنية العامة

تقبل الخاصية float كلمةً محجوزةً وحيدةً من الكلمات المذكورة في هذا القسم.

left

سيكون العنصر عائمًا على الجانب الأيسر من الصندوق الحاوي له.

right

سيكون العنصر عائمًا على الجانب الأيمن من الصندوق الحاوي له.

none

لا يجوز أن يكون العنصر عائمًا.

البنية الرسمية

float: none | left | right;

انظر أيضًا

• صفحة الخاصية position التي تصف كيفية تموضع العنصر في المستند.
• صفحة الخاصية display  التي تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.

مصادر ومواصفات

• مسودة CSS Logical Properties Level 1. أضافت هذه المسودة القيم inline-start و inline-end، لكنها غير مدعومة إلا من قلّة قليلة من المتصفحات.
• مسودة CSS Basic Box Model.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.