50. العناصر العائمة (أداة تخطيط تاريخية)

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

كيف تعمل العناصر العائمة

عندما يتم جعل عنصر عائماً (left أو right):

1. يتم إخراجه من التدفق الطبيعي، ولكنه لا يزال يؤثر على موضع العناصر الأخرى.
2. ستلتف عناصر الكتلة التي تلي العنصر العائم حوله.
3. ستنهار حاوية العنصر الأب (الصندوق الذي يحمل العنصر العائم) في ارتفاعها حول العنصر العائم.

css .image-float { float: left; /* تتحرك الصورة إلى أقصى يسار حاويتها / margin-right: 15px; / تخلق مسافة بين الصورة والنص */ }

مشكلة Clearfix

أكبر تحدٍ مع العناصر العائمة هو أنها تتسبب في انهيار ارتفاع الحاوية الأب. يتطلب هذا إصلاحاً، يتم تقليدياً باستخدام Clearfix Hack.

css /* الـ Clearfix Hack (مطلوب على الحاوية الأب) / .clearfix::after { content: ""; display: table; clear: both; / يوقف تأثيرات العناصر العائمة فوقه */ }

السياق الحديث: يجب الآن حجز float لغرضها الأصلي فقط: ترتيب النص حول عناصر صغيرة مثل الصور أو الأيقونات. لا تستخدم العناصر العائمة أبداً لتخطيط الصفحة الرئيسي؛ استخدم Flexbox أو Grid بدلاً من ذلك.