خاصية clear
آخر تحديث: 2026-09-13
clear خاصية clear
تتحكم خاصية clear فيما إذا كان يُسمح للعنصر بالجلوس بجانب عناصر عائمة على يساره أو يمينه أو كليهما. عند تعيينها إلى left أو right أو both، ينتقل العنصر أسفل العناصر العائمة ذات الصلة. وهي أداة مهمة لمنع تكسر التخطيط في التخطيطات القائمة على float.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
clear: none | left | right | both | inline-start | inline-end;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | left | right | both | كلمة مفتاحية | سلوك إزالة العائم. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| clear | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： clear:both هي القيمة الأكثر شيوعًا — لا يسمح العنصر بأي عائمات على أي من الجانبين وينتقل أسفل جميع العناصر العائمة.
تحذير： تعمل clear فقط على العناصر على مستوى الكتلة، وليس على العناصر السطرية. في التخطيطات الحديثة، الطريقة الموصى بها لإزالة العائمات هي نمط clearfix: عنصر زائف ::after مع clear:both.
❓ الأسئلة الشائعة
Qما الفرق بين clear و clearfix؟
Aclear هي خاصية CSS تُطبَّق على العنصر بعد العائم، وتخبره بالانتقال أسفل العنصر العائم حتى لا يجلس النص أو الكتل بجانبه. أما clearfix فهي تقنية إزالة، عادةً عنصر زائف ::after مع clear:both على الأب، تجعل الأب يحيط مجددًا بأبنائه العائمين وتصلح انهيار الارتفاع. إحداهما خاصية؛ والآخرى حل متكامل.
Qهل يمكن استخدام clear على العنصر العائم نفسه؟
Aنعم، ولكن بتحفظ: عند تعيين clear على عنصر عائم، ينتقل أسفل العناصر العائمة السابقة من نفس الاتجاه. على سبيل المثال، عنصر ذو float:left و clear:left يهبط أسفل العناصر العائمة اليسرى السابقة، لا أسفل جميع العناصر العائمة. وينقل clear:both العنصر أسفل النقطة التي تنتهي عندها العائمات اليسرى واليمنى، ويُستخدم عادةً لبدء النص في سطر جديد بعد صورة عائمة.
Qماذا يعني clear:both؟
Aيعلن clear:both أنه لا يُسمح بأي عناصر عائمة على أي من الجانبين، لذا يدفع المتصفح العنصر إلى سطر جديد أسفل جميع العناصر العائمة السابقة. ويزيل left العائمات اليسرى فقط، ويزيل right العائمات اليمنى فقط. وclear:both هو القيمة الأكثر استخدامًا، وبدمجه مع عنصر زائف ::after، يشكّل حل clearfix الكلاسيكي الذي يمنع انهيار الحاويات الأصلية عندما تطفو عناصرها الفرعية.
Qلماذا لا تعمل خاصية clear؟
Aالأسباب الشائعة: أولًا، تتأثر clear فقط بالعناصر على مستوى الكتلة، لذا لا تفعل شيئًا في العناصر السطرية مثل span؛ وثانيًا، العنصر نفسه عائم، لذا يمكن لـ clear نقله فقط أسفل العناصر العائمة السابقة من نفس الاتجاه، مما يعطي نتيجة مختلفة عما هو متوقع؛ وثالثًا، العنصر غير متأثر بعائم فعليًا لأن العائمات انتهت بالفعل. تأكد من أن العنصر على مستوى الكتلة وأن عائمًا يسبقه.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
خاصية float
تعرّف على المشكلة التي يحلها clear.
تخطيط Flexbox
البديل الحديث للتخطيطات القائمة على float.
