شرح float و clear في CSS — كيف تجعل النص يلتف حول الصور بشكل صحيح؟

خاصية float كانت قديماً تُستخدم في بناء التخطيطات، واليوم تُستخدم غالباً لجعل النصوص تلتف حول الصور أو العناصر الصغيرة.

إذا كنت تبحث عن شرح float في CSS أو كيف أستخدم clear both أو حل مشكلة انهيار div بسبب float، فهذا الدرس يشرحها بشكل عملي.

ما هي float في CSS؟

خاصية float تجعل العنصر يطفو إلى اليمين أو اليسار داخل الحاوية، بينما يلتف النص أو المحتوى حوله.

• float: left;
• float: right;
• float: none; (الافتراضي)

التعريف البسيط: float in CSS تحرك العنصر لليسار أو اليمين وتسمح لبقية المحتوى بالالتفاف حوله.

float: right في CSS

img.thumb {
    float: right;
    margin-left: 12px;
}

ماذا يفعل هذا الكود؟ يضع الصورة يمين الفقرة ويجعل النص يلتف من اليسار.

النتيجة المتوقعة: مظهر قريب من مقالات الأخبار.

خطأ شائع: نسيان margin فيلتصق النص بالصورة.

float: left في CSS

img.thumb {
    float: left;
    margin-right: 12px;
}

ماذا يفعل هذا الكود؟ يضع الصورة يسار الفقرة ويجعل النص يلتف من اليمين.

النتيجة المتوقعة: النص يملأ المساحة المتبقية بجانب الصورة.

خطأ شائع: استخدام float في عنصر كبير جداً فيكسر شكل الفقرة.

ما هي clear في CSS؟

بعد عناصر float، قد تلتف العناصر التالية بشكل غير مرغوب. هنا نستخدم clear لإيقاف هذا الالتفاف.

• clear: left; يوقف تأثير العناصر الطافية يساراً.
• clear: right; يوقف تأثير العناصر الطافية يميناً.
• clear: both; يوقف تأثير الجهتين (الأكثر استخداماً).

.footer {
    clear: both;
}

ماذا يفعل هذا الكود؟ يجبر الفوتر أن يبدأ بعد انتهاء جميع العناصر الطافية.

النتيجة المتوقعة: يمنع تداخل الفوتر مع الصور/الصناديق الطافية.

خطأ شائع: نسيان clear في عناصر الإغلاق أسفل float.

مشكلة انهيار الأب مع float (Clearfix)

عندما كل أبناء الحاوية يكونون float، قد ينهار ارتفاع الأب ويصبح صفراً. الحل الشائع: clearfix أو overflow: auto على الأب.

.parent {
    overflow: auto; /* حل سريع */
}

/* أو clearfix التقليدي */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

ماذا يفعل هذا الكود؟ يجبر الأب على احتواء أبنائه الطافين وعدم الانهيار.

خطأ شائع: تجاهل المشكلة ثم ظهور عناصر لاحقة فوق الحاوية المنهارة.

متى نستخدم float و clear في CSS اليوم؟

• التفاف نص حول صورة داخل مقال.
• حالات صغيرة legacy في مشاريع قديمة.
• ليس الخيار الأول للأعمدة والتخطيط العام.

أخطاء شائعة في Float و Clear في CSS

١) نسيان clear: يسبب تداخل العناصر التالية.

٢) عدم إضافة مسافة حول الصورة الطافية: النص يلتصق بها.

٣) استخدام float لتخطيط كامل جديد: صيانة أصعب من Flexbox/Grid.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي float في CSS؟

خاصية تجعل العنصر يطفو يميناً أو يساراً ويلتف المحتوى حوله.

كيف أجعل النص يلتف حول صورة في CSS؟

ضع الصورة بـ float: right; أو float: left; مع margin مناسب.

ما فائدة clear: both في CSS؟

تمنع تأثير float وتجبر العنصر التالي أن يبدأ في سطر جديد واضح.

لماذا ينهار div الأب عند استخدام float؟

لأن العناصر الطافية تخرج من التدفق الطبيعي؛ استخدم clearfix أو overflow:auto على الأب.

هل float قديمة في CSS؟

ما زالت مفيدة لبعض الحالات، لكن التخطيطات الحديثة تعتمد غالباً على Flexbox وGrid.