درحالی که داشتم CSS رو در سایت w3schools تمرین میکردم، در یکی از تمرینات که به منظور ایجاد یک dropdown در یک navbar نوشته شده بود به مورد عجیبی برخوردم که بعد از float کردن المان رنگ زمینه اون ناپدید میشد.
بعد از جستجو به این نتیجه رسیدم که برای رفع این مشکل باید به کانتینر(container) یا دربرگیرنده المان پراپرتی زیر رو داد:
برام عجیب شد که چرا باید این کار رو انجام داد، اولین توضیحی که برام قابل درک بود این بود که:
المان های float در واقع هیچ فضایی را اشغال نمی کنند. یعنی به طور منطقی height آن ها برابر با 0 است. به همین علت اگر به آن ها background-color بدهیم رنگی مشاهده نمی شود.
ولی این برام کافی نبود و گشتم و به یک توضیح جامع تر در سایت quirksmode.org رسیدم که خلاصه اون به این شرح بود:
در چیدمان های با ساختار float مشکلی که وجود دارد این است که container برای تطبیق با المان float حاضر به گسترش نیست(و به همین دلیل رنگ بکگراند دیده نمیشه).
به همین خاطر اگر بخواهیم یک رنگ پس زمینه یا border به المان بدهیم باید مرورگر را مجبور به گسترش container به اندازه المان float کنیم.
برای این کار یک روش قدیمی و یک روش جدید وجود دارد:
روش قدیمی: با افزودن یک المان و دادن پراپرتی clear به آن می توانیم این کار را انجام دهیم. در واقع داریم یک المان غیر float به container اضافه میکنیم تا مجبور به گسترش شود.
روش جدید: با اضافه کردن overflow:hidden; می توانیم این کار را انجام دهیم.
تا جایی که من متوجه شدم، روش استفاده از پراپرتی overflow در واقع یک ترفند برای اجبار مرورگر به گسترش container است و دلیل منطقی یا به خصوصی برای آن وجود ندارد.
اگر شما توضیحی برای این مورد دارید، ممنون میشم در قسمت نظرات اون رو به اشتراک بذارید.
لینک منبع اصلی رو برای مطالعه بیشتر اینجا قرار میدم:
