CSS: طفو ومسح CSS

آخر تحديث: 2026-10-13

الطفو كان طريقة التخطيط الرئيسية لـ CSS قبل Flexbox وGrid. بينما تخططيطات الحديثة تفضل Flexbox/Grid، فهم الطفو لا يزال مهماً — ستقع عليه في قواعدコード قديمة.

مرجع سريع لخصائص الطفو

خصائص هذا القسم: float left right clear

1. خاصية الطفو

float تجعل العناصر "تطفو" إلى جانب حاويتها، مع محتوى آخر يلف حولها.

▶ مثال

(1) سلوك الطفو

▶ مثال

2. مشاكل الطفو: انهيار الارتفاع

عندما يطفو جميع الأبناء، الأصل "ينسى" لفّهم:

▶ مثال

النتيجة: حدود الأصل تحتضن الأعلى، الأبناء يفيضون — لأن الأبناء العائمين لا يشغلون مساحة في تدفق المستند.

3. مسح الطفو

(1) استخدام خاصية clear (تقليدي)

▶ مثال

(2) overflow الأصل

▶ مثال

يستخدم سلوك BFC (سياق تنسيق القطعة).

(3) مسح عنصر pseudo (مُوصى به)

الطريقة القياسية المُوصى بها:

▶ مثال

4. البديل الحديث: Flexbox

معظم تخطيطات الطفو يمكن استبدالها الآن بـ Flexbox أو Grid:

▶ مثال

خصائص هذا القسم: float left right clear

❓ أسئلة شائعة

📖 ملخص

• الطفو كان يوماً طريقة التخطيط الرئيسية لـ CSS، الآن حلّت محله بشكل كبير Flexbox و Grid
• مشكلة الطفو الجوهرية هي "انهيار الارتفاع" — الإصلاح الكلاسيكي هو عنصر pseudo clearfix
• للمشاريع الجديدة، استخدم Flexbox أو Grid؛ لتأثيرات اللف النصي، الطفو لا يزال الخيار الأفضل

📝 تمارين

1. أنشئ صفحة صورة ونص مع الصورة تطفو لليسار والنص يلف حولها.
2. استخدم الطفو لتنفيذ "تخطيط ثلاثة أعمدة" — يسار 200px، يمين 200px، وسط متكيف.
3. وضح "انهيار الارتفاع" وحله بثلاث طرق مختلفة على الأقل (clearfix، overflow، pseudo-element).
4. أعد كتابة تخطيط الطفو ثلاثة أعمدة باستخدام Flexbox وقارن اختلافات الكود.

فريق Web-Tutorial التقني

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

من نحن