متى نستخدم الـ float ولماذا نستخدمه

روجيه حنا · 17 مارس 2023

لقد شرح المدرب كيف نستخدم الفلوت ولكن سؤالي متى ولماذا نستخدمه ؟

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

شكرا.

تم التعديل في 17 مارس 2023 بواسطة روجيه حنا

عمر قره محمد · 17 مارس 2023

نستخدمه عندما نريد ان نجعل العناصر تطفو بجانب بعضها البعض.

بتاريخ 8 دقائق مضت قال روجيه حنا:

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

يطبق على الـ header فقط ولا يطبق على العناصر التي تأتي بعده، ولكن عليك استخدام الـ clear على العنصر الذي يأتيب بعده مثل :

<style>
  div {
    padding: 15px; 
  }
  .div1 {
    background: red;
    float: left;
  }
  .div2 {
    clear: left;
    background: yellow;
  }
  .div3 {
    background: green;
  }
</style>
<body>
  <h2>Float and clear</h2>  
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
  <div class="div3">Div 3</div>
</body>

انصحك بنسخ الكود السابق والتعديل عليه اكثر من مرة حتى تتعرف على الـ float بشكل افضل.

أسامة زيادة · 17 مارس 2023

يتم استخدام الخاصية float لتحديد ترتيب العناصر في تصميم الصفحات، وخاصة في ترتيب الصور والنصوص. عند تطبيق خاصية float على عنصر، يتم تحديد مكان تواجده بناء على تدفق الصفحة، ويتم تحريك العناصر الأخرى حولها، حيث يتم تحديد اتجاه التحريك عن طريق قيمة خاصية float المحددة ، كما في السنوات الأخيرة أصبح التعامل مع خاصية float قليل جداً نظراً لأنها تعمل تعويم في الصفحة واصبحت تستبدل بخاصية Flex نظراً لسهولة التعامل مع الخاصية وتوفر الكثير من المزايا .

للإطلاع أكثر على خاصية float من هنا على موسوعة حسوب .

Mustafa Suleiman · 17 مارس 2023

بجانب ما تم ذكره، فهناك بعض التوضحيات التي يجب ذكرها:

يتم استخدام خاصية float لتحقيق تصميمات متعددة، مثل إنشاء صناديق أو عمودين يمتدان بجوار بعضهما البعض، وكذلك تقسيم الصفحة إلى أجزاء متعددة مع تحريكها بشكل مستقل.
بالإمكان تحديد قيمة الخاصية float على اليسار أو اليمين، ويتم تحريك العنصر إلى تلك الجانب، بحيث يتم إضافة العنصر التالي على نفس الجانب إذا كان متاحاً.
ويمكن استخدام خاصية clear لإزالة الخاصية float عند نهاية عنصر معين، والتأكد من أن العنصر التالي يظهر بشكل صحيح في المكان المطلوب.
من المهم الاهتمام بالترتيب الصحيح للعناصر المطفوة، حيث يمكن أن يؤدي الاختلاط بين العناصر المطفوة وغير المطفوة إلى أخطاء في تصميم الصفحة، وتحديداً في تواجد العناصر النصية والصور في الأماكن المطلوبة.
يجب تجنب استخدام خاصية float بشكل كبير، حيث يمكن أن تؤدي إلى مشاكل في التصميم مثل فراغات غير متوقعة بين العناصر، وكذلك صعوبة التعامل معها في تصميم المواقع المتجاوبة.

وإليك أمثلة على ما تم ذكره:

1- تصميم صندوقين على جانبي الصفحة باستخدام float:

<div style="float:left;width:50%;">Box 1</div>
<div style="float:right;width:50%;">Box 2</div>

2- تحديد الخاصية float على اليمين:

<img src="example.jpg" style="float:right;">

3- استخدام خاصية clear لإزالة الخاصية float:

<div style="float:left;width:50%;">Content</div>
<div style="clear:both;"></div>
<div>Next content</div>

4- ترتيب العناصر بشكل صحيح عند استخدام float:

<div style="float:left;">Image</div>
<div style="float:right;">Text</div>
<div style="clear:both;"></div>

5- تجنب استخدام float بشكل كبير واستخدام التقنيات الحديثة مثل Flex و Grid:

<div style="display:flex;">
  <div style="flex:1;">Content 1</div>
  <div style="flex:1;">Content 2</div>
  <div style="flex:1;">Content 3</div>
</div>

كما أشرت، فاستخدام خاصية float يمكن أن يسبب بعض المشاكل مثل التداخل مع عناصر أخرى في الصفحة، ويمكن تجنب هذه المشاكل عن طريق استخدام الخيارات الأخرى المتاحة. ومع ذلك، فإن الخاصية ما زالت مفيدة في بعض الحالات، ويجب على المصممين الويب فهم كيفية استخدامها بشكل صحيح وفقًا للحاجة.

وأنصحك بقراءة النقاشات التالية، فهي ستجيب على كافة تساؤلاتك.

الخاصية float في موسوعة حسوب

محمد Fahmy · 18 مارس 2023

لقد تم شرح الخاصية float بالتفصيل في الإجابات السابقة.

ولكن أنصحك باستخدام Flexbox و Grid System فهما أدوات تصميم قوية لتحديد ترتيب العناصر في الصفحة. بدلاً من استخدام float كأسلوب أساسي لتحديد ترتيب العناصر.

Flexbox هو نظام تنظيم العناصر الذي تم إدخاله في CSS3. يتيح لتصميمات الويب القدرة على إنشاء أشكال مختلفة للعناصر - مثل تقسيم الشاشة إلى مساحات متساوية وأطوال مختلفة - دون الحاجة إلى عناصر متعددة (div) لتحقيق ذلك.
بالإضافة إلى ذلك، يسمح Grid System للمطورين بتحديد ترتيب سلاسل العناصر وعرضها بشكل منتظم في الصفحة. هذا يجعل تصميمات البنية أكثر تنظيمًا وأفضل للقراءة. على الرغم من أن استخدام float لا يزال ممكنًا، إلا أن استخدام Grid System يقلل من وقت التصميم ويجعل التصميم أكثر فعالية في النهاية.

عندما يتم استخدام Flexbox و Grid System، يمكن للمطورين الاهتمام بالتصميم والعرض بدلاً من القلق حول كيفية وضع العناصر بشكل صحيح في الصفحة. هذا يجعل تصميم المواقع أكثر دقة ويمكن عرض هذه الصفحات بشكل أفضل على الشاشات المختلفة، بغض النظر عن حجم الشاشة.

بشكل عام يجب أن يتم استخدام Flexbox و Grid System بدلاً من عناصر العرض الأخرى مثل float في تقسيم تصميمات الشاشة وتحديد ترتيب العناصر وعرضها بشكل منتظم. هذا يوفر على مطوري الويب الوقت والجهد في إنشاء مواقع أفضل وأكثر فعالية وتنظيمًا.

وهذه بعض المصادر لتعلم Flexbox و Grid System.

Mohammed Seyam · 18 مارس 2023

تستخدم تقنية الفلوت في CSS لتحديد توزيع العناصر داخل عنصر واحد، عندما تكون عرض العناصر أكبر من عرض العنصر الأم. يتم استخدام الفلوت لتحديد توزيع العناصر إما إلى اليمين أو اليسار أو الوسط من العنصر الأم. يتم استخدام الفلوت بشكل أساسي لعرض النص والصور بشكل جيد في تصميم الصفحات.

بشكل عام، يتم استخدام الفلوت لتنظيم العناصر عندما تحتاج إلى توزيع العناصر داخل عنصر واحد وتجنب الاختلاط بين العناصر المختلفة في التصميم. يمكن استخدام الفلوت لتحقيق توزيع الصور والنصوص بطريقة أفضل وأكثر تنظيماً، وهذا يتيح للمستخدمين تصفح المحتوى بسهولة وراحة.

أما بالنسبة لسؤالك الثاني، فإذا تم تطبيق الفلوت على الهيدر، فستتأثر جميع العناصر التي تأتي بعده بشكل مباشر، إلا إذا تم تعيين قيمة خاصة للعنصر بعد الهيدر. في هذه الحالة، سيتم تطبيق التأثير على العنصر الذي يلي الهيدر، ولكن لا يؤثر على العناصر الأخرى بعد ذلك.

متى نستخدم الـ float ولماذا نستخدمه

السؤال

روجيه حنا

5 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

أسامة زيادة

Mustafa Suleiman

محمد Fahmy

Mohammed Seyam

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية