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

أهلاً بك

الطوفان float: تُعرّف رابطة الشبكة العالمية W3C خاصيّة الطوفان بالشكل التالي:

اقتباس

الطوفان هو انتقال صندوق إلى أحد الجهتين اليسار أو اليمين على الخط الحالي، وأكثر ما يُميّز العنصر الطائف (أو المُطوّف أو الصندوق العائم) كيف أنّ المُحتوى قد ينساب إلى جانبه (أو يُمنع من ذَلِك باستخدام الخاصيّة "clear"). وينساب المُحتوى أسفل الجانب الأيمن من الصندوق عندما يكون مُطوفًا إلى جهة اليسار، وأسفل الجانب الأيسر من الصندوق عندما يكون مطوفًا إلى جهة اليمين.

والـ float لها أربع قيم وهي:

1. left: حيثُ أنّ المربع سوف يكون في أقصى اليسار.
2. right: حيثُ أنّ المربع سوف يكون في أقصى اليمين.
3. none: هي القيمة الافتراضيّة والتي تجعل من العنصر لا يستخدم الطوفان أبدًا.
4.  inherit:وتجعل القيمة inherit العنصر يرثُ قيمة الطوفان من العنصر الأب الخاص به.

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

الآن بالنسبة للصورة التي فوق عرض المُربع هو 1000px، إذًا سوف نُحدد قيمة عرض لكل مربع 250px أو حسب ما تُريد مع استخدام الاكواد التالية float: left or right بالإضافة إلى استخدام margin: left or right وتحديد قيمة عرض width وطول height لكل مربع.

هذا الشرح سوف يُفيدك في أكاديمية حسوب لفهم آلية عمل الطوفان float.

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

أتمنى أنّ أكون أفدتك.

خاصية Float داخل ملف تنسيق css تقبل قيمتين اثنتين left لجعل العنصر يطفو جهة اليسار وقيمة right لجعله جهة اليمين، وهذ مثال عملي لصورة خصصة خاصية folat إلى القيمة right:

دون استعمال خاصية clear:

باستعمال خاصية clear:

يمكنك التعمق في الموضوع من خلال دروس الأكاديمية التالية:

و المصدر:

http://www.w3schools.com/css/css_float.asp

حسب علمي ،افضل طريقة لتحقيق الشكل الذي تريده لا يمكن فعله ب float ....اليك مثالا في الصورة الاولى لخاصية float .... وأفضل طريقة لتغيير مكان أي div او اي شيء فخاصية flex تسمح بجعل جميع مكونات ذلك div في سطر واحد و خاصية flex-wrap تسمح برجوع الdiv الى السطر ... ثم تستعمل الخاصيات الاخرى للflex. اذا لم تفلح تواصل معي وساساعدك ان شاء الله.

<div id="conteneur">
    <div class="element">Elément 1</div>
    <div class="element">Elément 2</div>
    <div class="element">Elément 3</div>
</div>

هذه بدون flex

#conteneur
{
    display: flex;
}

وهذه بالflex

#conteneur
{
    display: flex;
    flex-wrap: wrap;
}
هذه للرجوع الى السطر