الخاصية float

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الخاصية 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  التي تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.

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