مشكلة background-color مع float فى CSS

في صفحات الويب هناك ما يعرف ب Block Formatting Context، هذه الأخيرة يمكن تعريفها على أنها خاصية تمكن من إنشاء تصاميم صغيرة (Mini-Layouts) داخل التصميم الكبير (Layout) لصفحة الويب.

مشكلتنا في مثل حالتك أن العناصر التي طبقنا عليها خاصية ال float يتم تجاهلها من طرف العنصر الأب ويتصرف كأنها غير موجودة في الأصل.

الحل يكمن في أن نطلب من العنصر الأب أن يقوم بإنشاء Block Formatting Context خاص به، وميزة ال BFC أنها تستطيع احتواء العناصر العائمة (Floated elements) وتنشئ Layout من نوع Block صغير قائم بذاته وشاملا لكافة العناصر التي تدخل في منطقة نفوذه :)

هناك عدة طرق لإنشاء BFC في CSS، من أشهرها:

• overflow (باستثناء visible)

• clear

• float

• display: flow-root (ما تزال غير مدعومة من بعض المتصفحات.)

أتمنى أن يكون ردي قد أجاب بشكل جيد على سؤالك.

overflow: hidden

من اسمها: اخفي مايزيد عن الحاوية من الظهور خارج الحاوية

بمعنى اخر : امنع مايزيد عن الحاوية من الظهور خارج الحاوية

النتيجة

الحاوية الاب ستحتوي كل الابناء وتتمدد على حسب احجامهم ولكن يجب ان يحمل الابناء جميعهم خاصية

display: block

لماذا

لان خاصية بلوك تجعل العنصر يستغل كل المساحة المتاحة له

بإمكانك مشاهدة الروابط التالية بالتفصيل

جرب هذه الحلول

.content::before, .content::after { content: " "; display: table; clear: both;}

أو أنك تخلي display الخاص ب الكلاس content على هذا النحو table

.content{display: table;}