خاصية Float
آخر تحديث: 2026-09-13
float خاصية Float
تُخرج الخاصية float العنصر من التدفق العادي وتجعله يطفو يسارًا أو يمينًا حتى تلمس حافته كتلة الاحتواء أو عنصرًا طافيًا آخر. صُممت في الأصل لتطويق النص حول الصور، ثم استُخدمت بكثرة في تخطيطات متعددة الأعمدة؛ وبما أن Flexbox و Grid أصبحا منتشرين الآن، عادت إلى غرضها الأصلي.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | جميع العناصر |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
float: none | left | right | inline-start | inline-end;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
left | right | none | كلمة مفتاحية | اتجاه طفو العنصر. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| float | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： يخرج العنصر الطافي من تدفق المستند، لذا قد يفقد الأب إدراك ارتفاعه وينهار. طرق شائعة لمسح الـ floats: overflow:hidden على الأب، أو عنصر زائف ::after.
تلميح： لتخطيطات متعددة الأعمدة، يُفضَّل Flexbox أو Grid؛ أما float فأنسب للسيناريوهات الأصلية مثل تطويق النص حول الصور.
❓ الأسئلة الشائعة
Qكيف أمسح الـ floats؟
Aثلاث طرق شائعة: أولًا، overflow:hidden أو auto على الأب لإحاطة الأبناء الطافيين بـ BFC؛ ثانيًا، طريقة العنصر الزائف الموصى بها: .clearfix::after{content:'';display:block;clear:both}؛ ثالثًا، display:flow-root على الأب. كلها تجعل الأب يحتوي مجددًا أبناءه الطافيين ويستعيد الارتفاع المنهار. وفي الكود الجديد، flow-root هو الأكثر أناقة، بينما تظل فئة clearfix في معظم القواعد البرمجية الحالية.
Qما الفرق بين float و display:inline-block؟
Aيُخرج float العنصر من التدفق ويدفعه يسارًا أو يمينًا، مما يسمح للنص الذي يليه بلفّه، وقد ينهار الأب في الارتفاع. أما inline-block فيُبقي العنصر داخل التدفق ويرتبه أفقيًا دون تأثير لفّ، ويترك فجوات بيضاء افتراضية بين العناصر يمكن إزالتها بـ font-size:0. باختصار، float مخصص لتطويق النص وتخطيطات الأعمدة المبكرة، بينما inline-block للقوائم الأفقية وأشرطة التنقل.
Qلماذا يُنهار ارتفاع الأب بسبب float؟
Aيخرج العنصر الطافي من التدفق العادي، لذا لا يدرك الأب ارتفاعه ويفترض أنه لا يحتوي شيئًا، فينهار إلى صفر أو إلى ارتفاع المحتوى غير الطافي فقط. الحل هو جعل الأب يحتوي الـ float مجددًا: overflow:hidden أو auto ينشئ BFC، وعنصر زائف clearfix يمسحه، أو display:flow-root يحقق نفس النتيجة. أما حاويات flex و grid فلا تنهار بهذه الطريقة إطلاقًا.
Qهل لا يزال float ضروريًا في التخطيطات الحديثة؟
Aلأغراض التخطيط، لا أساسًا: فقد استبدل Flexbox و Grid الـ float تمامًا في الترتيبات متعددة الأعمدة والأفقية، مع تحكم أكبر دون عبء مسح الـ floats. الآن يعود float لغرضه الأصلي في تطويق النص حول الصور، كما في الطباعة الصحفية. وإذا احتجت في مشروع جديد فقط لعناصر متجاورة، ففضّل flex، واحتفظ بـ float للحالات النادرة التي يجب أن يتدفق فيها النص حول شكل ما.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
clear (مسح الـ Float)
تعلّم كيف تمنع تأثر العناصر بالـ floats.
تخطيط Flexbox
البديل الحديث للتخطيط باستخدام float.
