شرح صفوف ومحتوى الفقرة
العناصر في صفحة الويب تم تطبيق عليها قيود في الوضع الأفتراضي, هذه القيود لا تتيح لمطوري الويب المرونة الكافية في التحكم في صف (ترتيب) العناصر بشكل أُفقي أو بشكل عمودي والسبب أن هناك مُشكلات ناتجه عن وضعية العنصر وهي أن بعض العناصر في الوضع الأفتراضي طريقة عرضها block ولها عرض الشاشة بالكامل وبعض العناصر طريقة عرضها inline لها عرض محدد علي حسب محتواها الداخلي فسوف نُلاحظ فجوات كثيرة في الصفوف وبين العناصر ومساحات مُهدرة أي مساحات لا يمكن إستغلالها ووضع عناصر بداخلها فهي مساحات بيضاء فالحل هو التعويم.
تَعْوِيمُ السَّفِينَةِ: إِسْبَاحُهَا فِي الْمَاءِ.
تعويم العناصر: مرونة العناصر داخل صفحة الويب حتي يُمكن صفها (ترتيبها) بشكل تسلسلي سواء أفقياً أو رأسياً.
يتم صف عناصر HTML في الوضع الأفتراضي من الجهة اليسري لصفحة الويب، يتم ترتيب جميع العناصر وفقاً لذلك, ولكن هناك عناصر تصف بجوار بعضها لبعض وهي العناصر من النوع display inline وعناصر أخري أسفل بعض وهي من النوع display block عن طريق خاصية float يمكن التحكم في عرض العناصر من جهة اليمين أو من جهة اليسار وايضاً طريقة عرض العنصر سوف تتغير من display block إلي display inline-block.
لماذا تُستخدم خاصية float:
تَعْوِيمُ السَّفِينَةِ: إِسْبَاحُهَا فِي الْمَاءِ.
تعويم العناصر: مرونة العناصر داخل صفحة الويب حتي يُمكن صفها (ترتيبها) بشكل تسلسلي سواء أفقياً أو رأسياً.
يتم صف عناصر 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;