CSS

CSS Float
تعويم العناصر عن طريق خاصية float في لغة CSS

سوف تتعلم في هذا الدرس طريقة تعويم عناصر HTML باستخدام خاصية ال float وهي عرض العناصر بطريقة أفقية تبدأ من جهة اليمين أو تبدأ من جهة اليسار ويستخدم تعويم العناصر لتقسيم صفحة الويب.

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

3266

المواضيع

24
الشروحات chevron_left CSS Float chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Float
تعويم العناصر عن طريق خاصية float في لغة CSS

</> CSS Float
تعويم العناصر عن طريق خاصية float في لغة CSS

العناصر في صفحة الويب تم تطبيق عليها قيود في الوضع الأفتراضي, هذه القيود لا تتيح لمطوري الويب المرونة الكافية في التحكم في صف (ترتيب) العناصر بشكل أُفقي أو بشكل عمودي والسبب أن هناك مُشكلات ناتجه عن وضعية العنصر وهي أن بعض العناصر في الوضع الأفتراضي طريقة عرضها block ولها عرض الشاشة بالكامل وبعض العناصر طريقة عرضها inline لها عرض محدد علي حسب محتواها الداخلي فسوف نُلاحظ فجوات كثيرة في الصفوف وبين العناصر ومساحات مُهدرة أي مساحات لا يمكن إستغلالها ووضع عناصر بداخلها فهي مساحات بيضاء فالحل هو التعويم.

تَعْوِيمُ السَّفِينَةِ: إِسْبَاحُهَا فِي الْمَاءِ.

تعويم العناصر: مرونة العناصر داخل صفحة الويب حتي يُمكن صفها (ترتيبها) بشكل تسلسلي سواء أفقياً أو رأسياً.
 
يتم صف عناصر HTML في الوضع الأفتراضي من الجهة اليسري لصفحة الويب، يتم ترتيب جميع العناصر وفقاً لذلك, ولكن هناك عناصر تصف بجوار بعضها لبعض وهي العناصر من النوع display inline وعناصر أخري أسفل بعض وهي من النوع display block عن طريق خاصية float يمكن التحكم في عرض العناصر من جهة اليمين أو من جهة اليسار وايضاً طريقة عرض العنصر سوف تتغير من display block إلي display inline-block.


لماذا تُستخدم خاصية float:
  • convert لتحويل طريقة عرض العناصر من display block إلي طريقة عرض display inline-block.
  • diraction لصف العناصر بشكل متسلسل بطريقة أفقية من جهة اليمين أو من جهة اليسار.

ملاحظة: يتم تسلسل العناصر بشكل أفقي في حالة أن العنصر له مساحة داخل عرض الصفحة فإذا كان ليس له مساحة فيبدأ صفحة أسف الصف العلوي من جهة اليسار أو من جهة اليمين علي حسب قيمة خاصية float إما left أو right.


قيم خاصية float في لغة CSS:

  • none وهي الوضع الافتراضي لأي عنصر ويتم عرض العنصر علي حسب خاصية display.
  •  left وهو يتم عرض العناصر من جهة اليسار وفقاً لترتيبه داخل الصف وترتيب الصفوف.
  • right وهو يتم عرض العناصر من جهة اليمين وفقاً لترتيبه داخل الصف وترتيب الصفوف.
float right

كانت العنصر في السابق أسفل بعضها لبعض لأن طريقة عرضها من النوع block وأصبحت الأن مع خاصية float من الجهة اليمني وايضا تم صفهم بجوار بعض لسبب أن لهم مساحة في الصف الأول.

float left

كانت العنصر في السابق أسفل بعضها لبعض لأن طريقة عرضها من النوع block وأصبحت الأن مع خاصية float من جهة اليسار وايضا تم صفهم بجوار بعض لسبب أن لهم مساحة في الصف الأول.

CSS float syntax

طريقة كتابة خاصية float في لغة CSS.

float:value;
CSS float values

قيم خاصية float في لغة CSS.

float:none|left|right|initial|inherit;
مًشكلة
سوف تظهر مساحات فارغة في الصفوف ناتجه عن إستخدام خاصية float في حالة ان العنصر ليس له مساحه في الصف الأول فسوف يبدأ من صف جديد والصف الأول به مساحة أقل من حجم العنصر الجديد تكون مساحة فارغة وغير مُستغله في التصميم.

</> CSS float none
خاصية float مع القيمة none في لغة CSS

تُستخدم خاصية float مع القيمة none لألغاء التأثير الناتج عن خاصية float أو لعرض العناصر بوضعهم الأفتراضي علي حسب طريقة عرض العنصر الناتج عن خاصية display في لغة CSS.

CSS float none

خاصية float مع القيمة none في لغة CSS.

p
{
  float: none;
  border:red solid 1px;
}

</> CSS float left
خاصية float مع القيمة left في لغة CSS

تُستخدم خاصية float مع القيمة left لصف وتعويم العناصر من جهة اليسار وتغيير عرض العناصر من display block إلي عرض display inline-block  في لغة CSS.

CSS float left

خاصية float مع القيمة left في لغة CSS.

p
{
  float:left;
  border:red solid 1px;
}

</> CSS float right
خاصية float مع القيمة right في لغة CSS

تُستخدم خاصية float مع القيمة right لصف وتعويم العناصر من الجهة اليمني وتغيير عرض العناصر من display block إلي عرض display inline-block  في لغة CSS.

CSS float right

خاصية float مع القيمة right في لغة CSS.

p
{
  float:right;
  border:red solid 1px;
}

</> CSS Float rules
قواعد خاصية float في لغة CSS.

  • content إذا كان هناك container حاوية مساحتة عرضها 100% من صفحة الويب فإن خاصية float لا تحدث تأثير واضح إلا إذا تم إستخدام float مع العناصر الداخلية فسوف يحدث عن ذلك تأثير واضح وهو تغيير إتجاه المحتوي الداخلية للحاوية.
  • 3d سوف تُصف العناصر الداخلية للحاوية الناتج عن إستخدام خاصية float عكسي خاصية float مع القيمة left سوف ينتج [Home - Profile - Contact ] وخاصية float مع القيمة right سوف ينتج [ Contact - Profile - Home].
  • display إستخدام خاصية float مع أي قيمة left أو right سوف ينتج عنها تتحويل عرض جميع العناصر من النوع display block إلي طريقة عرض مختلفة display inline-block.
CSS float no effect

لا يحدث تأثير واضح عن طريق خاصية float في لغة CSS في حال أن الحاويه 100% وعدم إستخدام flaot مع العناصر الداخلية للحاويه.

div
{
  width:100%;
  float: right;
  border:dashed 2px blue;
}
CSS float change element position

تغيير موضع العناصر وترتيبها طريق خاصية float في لغة CSS.

span
{
float:right;
border:red solid 1px;
padding:5px;
}
CSS float change display

تغيير طريقة عرض العناصر من display block إلي display inline-block عن طريق خاصية float في لغة CSS.

div
{
  float: left;
  padding: 15px; 
  border:dashed blue 2px;
  margin-left:5px;
}
مصطلحات الدرس
Float
Float

تعويم

Elements
Elements

عناصر

Browser
Browser

متصفح

link
Display
Display

شاشة

Block
Block

كتلة

Inline
Inline

مضمن

Line
Line

سطر / خط

Boxes
Boxes

صناديق

Property
Property

خاصية

Content
Content

محتوي

Element
Element

عنصر

None
None

لاشئ

Left
Left

يسار

Right
Right

يمين

Inherit
Inherit

متوارث

Parent
Parent

الأبوين

Container
Container

حاوية المحتوي

Layout
Layout

تخطيط

Each Other
Each Other

بعضهم البعض

Next
Next

التالي

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.