الخاصية float

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

الخاصية 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;

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