في صفحات الويب هناك ما يعرف ب Block Formatting Context، هذه الأخيرة يمكن تعريفها على أنها خاصية تمكن من إنشاء تصاميم صغيرة (Mini-Layouts) داخل التصميم الكبير (Layout) لصفحة الويب.
مشكلتنا في مثل حالتك أن العناصر التي طبقنا عليها خاصية ال float يتم تجاهلها من طرف العنصر الأب ويتصرف كأنها غير موجودة في الأصل.
الحل يكمن في أن نطلب من العنصر الأب أن يقوم بإنشاء Block Formatting Context خاص به، وميزة ال BFC أنها تستطيع احتواء العناصر العائمة (Floated elements) وتنشئ Layout من نوع Block صغير قائم بذاته وشاملا لكافة العناصر التي تدخل في منطقة نفوذه :)
هناك عدة طرق لإنشاء BFC في CSS، من أشهرها:
overflow (باستثناء visible)
clear
float
display: flow-root (ما تزال غير مدعومة من بعض المتصفحات.)
أتمنى أن يكون ردي قد أجاب بشكل جيد على سؤالك.
التعليقات