جاري التحميل...

العوم والمسح (Float و Clear)

درس z-index رتّب الطبقات المتداخلة. float وclear يحلّان مشكلة كلاسيكية أخرى: اجعل النص يلتصق بجانب صورة أو صندوق تنبيه، ثم قرّر متى يجب أن يسقط الكتلة التالية أسفل تلك العائمات. تعلّم نمط اللفّ — واترك شبكات الصفحة لـ Flexbox وGrid.

مجموعة أدوات float و clear

📊 float و clear بنظرة سريعة

الأداة	المهمة اليومية
`float: left`	يسحب الصندوق لليسار؛ يمكن للمحتوى التالي أن يلتف يمينًا
`float: right`	يسحب الصندوق لليمين؛ يمكن للمحتوى التالي أن يلتف يسارًا
`float: none`	الافتراضي — بلا سلوك float
`clear: left`	الكتلة التالية ترفض الجلوس بجانب عائمات اليسار
`clear: right`	الكتلة التالية ترفض الجلوس بجانب عائمات اليمين
`clear: both`	الكتلة التالية تسقط أسفل أي عائمة من الجانبين
Clearfix	الأب يتمدّد ليحتوي الأبناء العائمين (مثلًا `overflow` أو `display: flow-root`)

الصناديق العائمة تغادر التدفق العادي بطريقة خاصة: الجيران قد يلتفون بجانبها، والأب قد ينهار ارتفاعه إلى صفر إن احتوى عائمات فقط. هذا الانهيار هو سبب وجود clearfix.

اعوِم صورة ولفّ القصة

اسحب الشكل لليسار ودع الفقرات تجري بجانبه. أعطِ الصورة عرضًا حتى يبدو اللفّ مقصودًا لا عرضيًا.

صورة float يسار

css

.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

اعوِم تنبيهًا من الجهة الأخرى

نصيحة قصيرة أو اقتباس يمكن أن يجلس يمينًا بينما يلتف نص الجسم يسارًا. أبقِ الهوامش حتى لا يلامس النص الصندوق.

تنبيه float يمين

css

.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

clear — توقّف عن الالتصاق بالـfloat

عندما يجب أن يبدأ عنوان أو تذييل أو قسم تالٍ من سطر جديد أسفل العائمات، استخدم clear. clear: both هو «انسقط أسفل كل ما هو عائم» اليومي.

clear both بعد العائمات

css

.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

الآباء المنهارون يحتاجون clearfix

إن غلّف الأب أبناءً عائمين فقط، قد ينهار ارتفاعه وتبدو الخلفيات/الحدود مكسورة. إصلاح هادئ: overflow: auto (أو hidden) على الأب — أو الحديث display: flow-root.

clearfix بـ overflow

css

.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root — حاوية احتواء حديثة

display: flow-root ينشئ سياق تنسيق كتلي جديد فيحتوي الأب عائماته دون استعارة آثار جانبية لـ overflow.

clearfix بـ flow-root

css

.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

عادة float هادئة

استخدم float للفّ النص حول الوسائط وحيل اللفّ الصغيرة. فضّل Flexbox أو Grid للقوائم وأعمدة الصفحة وشبكات البطاقات. تذكّر: position يضع؛ z-index يكدّس؛ float يلفّ.

نمط وسائط مع نص

css

.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

جرّب بنفسك

اعوِم صورة يسارًا داخل مقال غني بالفقرات واضبط الهوامش.
اعوِم صندوق نصيحة يمينًا ولفّ نص الجسم بجانبه.
أضف clear: both لتذييل كان يتسلق بجانب العائمات.
أصلح أبًا منهارًا بـ overflow: auto أو display: flow-root.
اكتب جملة واحدة: متى تختار Flex بدل float؟

أخطاء شائعة

بناء تخطيطات الصفحة كاملة بـ float بدل Flex/Grid
نسيان clear فيتسلق التذييل بجانب الصور
تجاهل الآباء المنهارين حول الأبناء العائمين
معاملة float كـ position أو كـ z-index
وضع clear على الصندوق العائم فقط وأنت تقصد الكتلة التالية

ملخص

float يسحب صندوقًا جانبًا ليلتف المحتوى التالي بجانبه
clear يجبر الكتل اللاحقة على السقوط أسفل العائمات
آباء العائمات فقط قد ينهارون — أصلِح بـ overflow أو flow-root
أبقِ float لأنماط اللفّ؛ استخدم Flex/Grid لبنية الصفحة
الوضع والتكديس يبقيان في أدواتهما (position، z-index)

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة