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

في هذا الدرس 5تصفّح المواضيع

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.

HTML

float:value;

CSS float values

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

HTML

float:none|left|right|initial|inherit;

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

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

جرّب بنفسك

CSS float none

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

HTML

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.

HTML

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.

HTML

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 مع العناصر الداخلية للحاويه.

HTML

div
{
  width:100%;
  float: right;
  border:dashed 2px blue;
}

جرّب بنفسك

CSS float change element position

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

HTML

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

جرّب بنفسك

CSS float change display

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

HTML

div
{
  float: left;
  padding: 15px; 
  border:dashed blue 2px;
  margin-left:5px;
}

جرّب بنفسك

ابنِ لغتك البرمجية

المصطلحات20

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 20 مفهومةأول بطاقة، أول خطوة

01 Float تعويم: للمراجعة
02 Elements عناصر: للمراجعة
03 Browser متصفح: <p><a href="https://www.closetag.com/tutorial/internet/browsers">المزيد عن Browser</a></p>; للمراجعة
04 Display شاشة: للمراجعة
05 Block كتلة: للمراجعة
06 Inline مضمن: للمراجعة
07 Line سطر / خط: للمراجعة
08 Boxes صناديق: للمراجعة
09 Property خاصية: للمراجعة
10 Content محتوي: للمراجعة
11 Element عنصر: للمراجعة
12 None لاشئ: للمراجعة
13 Left يسار: للمراجعة
14 Right يمين: للمراجعة
15 Inherit متوارث: للمراجعة
16 Parent الأبوين: للمراجعة
17 Container حاوية المحتوي: للمراجعة
18 Layout تخطيط: للمراجعة
19 Each Other بعضهم البعض: للمراجعة
20 Next التالي: للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة

01 CSS CSS: Cascading Style Sheets; صفحات الأنماط الانسيابية; للمراجعة
02 HTML HTML: Hypertext Markup Language; لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>; للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

4أسئلة 2أنواع تحديات 100%هدف الإتقان

تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي4 أسئلة تنتظرك

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

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

float right

float left

CSS float syntax

CSS float values

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

CSS float none

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

CSS float left

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

CSS float right

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

CSS float no effect

CSS float change element position

CSS float change display

سجّل الدخول لحفظ تقدمك

المصطلحات20

الاختصارات2

اختبر فهمك.
ووصلها للإتقان.

في ماذا تستخدم خاصية float ؟

ما هو الاتجاه الذي ستأخذه العناصر في العرض في حالة كانت قيمة خاصية float هي left ؟

ما هو الاتجاه الذي ستأخذه العناصر في العرض في حالة كانت قيمة خاصية float هي right ؟

في ماذا تستخدم خاصية clear ؟

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

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

float right

float left

CSS float syntax

CSS float values

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

CSS float none

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

CSS float left

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

CSS float right

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

CSS float no effect

CSS float change element position

CSS float change display

مشاركة

هل كان هذا الدرس مفيدًا؟

سجّل الدخول لحفظ تقدمك

المصطلحات20

الاختصارات2

اختبر فهمك.ووصلها للإتقان.

في ماذا تستخدم خاصية float ؟

ما هو الاتجاه الذي ستأخذه العناصر في العرض في حالة كانت قيمة خاصية float هي left ؟

ما هو الاتجاه الذي ستأخذه العناصر في العرض في حالة كانت قيمة خاصية float هي right ؟

في ماذا تستخدم خاصية clear ؟

اختبر فهمك.
ووصلها للإتقان.