الخاصية float

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

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

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

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

القيمة الابتدائية	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 أثرٌ على تلك العناصر.
غير ذلك	لا تغيير على القيمة المحسوبة.

أمثلة

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

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

شيفرة HTML:

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

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

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

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