جادوی overflow:hidden در شیوه‌نامه‌ها( CSS )

استفاده ویژگی overflow:hidden علاوه بر کاربرد رسمی آن که در استانداردها تعریف شده، کاربردهای دیگری نیز دارد که در طراحی وب بسیار کارآمد است.
علت اصلی کاربردهای جانبی این دستور، تغییر ماهیت عناصر است. عناصری که با ویژگی «overflow:hidden» تعریف شوند حالت نمایشی BFC یا Block formatting context را به خود می‌گیرند.
در حال حاضر ویژگی استانداردی برای تغییر حالت عناصر به BFC تعریف نشده است و تنها راه دستیابی به این حالت استفاده از برخی دستورات CSS است که ساده‌ترین و ایمن‌ترین آن‌ها «overflow:hidden» به حساب می‌آید.

در ادامه برخی کاربردهای حالت BFC را مرور می‌کنیم:

محلی برای نگهداری عناصری با حالت float

عناصری با ویژگی float در سمت راست یا چپ پدر خود قرار می‌گیرند. چنانچه پدر ویژگی BFC را نداشته باشد، ارتفاع فرزند float بر ارتفاع پدر بی‌اثر خواهد بود.
به مثال زیر توجه کنید.

حالت معمولی
 
BFC
<div style="background-color: #ff0;">
	<div style="float: right; background-color: #330;">حالت معمولی</div>
</div>
 
<div style="overflow: hidden; background-color: #ff0;">
	<div style="float: right; background-color: #330;">BFC</div>
</div>

اثربخشی حاشیه‌ی خارجی عنصر بر عنصر والد

در وضعیت عادی، چنانچه دو عنصر تو در تو باشند و برای عنصر داخلی حاشیه‌ی خارجی یا margin مشخص شود، عنصر بیرونی به اندازه‌ی محتوای عنصر درونی گسترش می‌یابد و حاشیه‌ی عنصر درونی خارج از محدوده‌ی عنصر بیرونی قرار می‌گیرد.
به مثال زیر توجه کنید:

حالت معمولی
BFC
<div style="background-color: #ff0;">
	<div style="margin: 10px; background-color: #330;">حالت معمولی</div>
</div>
 
<div style="overflow: hidden; background-color: #ff0;">
	<div style="margin: 10px; background-color: #330;">BFC</div>
</div>

عرض باقیمانده در کنار floatها

عناصر دارای ویژگی float فضایی را اشغال نمی‌کنند. در نتیجه عناصر کناری آن‌ها برای جانمایی با مشکل مواجه می‌شوند. چنانچه وضعیت عناصر کناری را در حالت BFC قرار دهیم، این مشکل حل می‌شود.

float
حالت عادی
 
float
BFC
<div style="overflow: hidden; background-color: #ff0;">
	<div style="float: right; background-color: #0aa;">float</div>
	<div style="background-color: #aa0; padding: 5px;">حالت عادی</div>
</div>
 
<div style="overflow: hidden; background-color: #ff0;">
	<div style="float: right; background-color: #0aa;">float</div>
	<div style="overflow: hidden; background-color: #aa0; padding: 5px;">BFC</div>
</div>

منبع: http://colinaarts.com/articles/the-magic-of-overflow-hidden

این نوشته در CSS, برنامه‌نویسی ارسال شده است. افزودن پیوند یکتا به علاقه‌مندی‌ها.

۴ دیدگاه برای جادوی overflow:hidden در شیوه‌نامه‌ها( CSS )

  1. بهنام می‌گوید:

    واقعا عالی بود.
    فقط یک سوال :
    آیا در تمام مرورگرها قونین BFC یکسان است ؟

    • امیرمسعود ایرانی می‌گوید:

      قطعا تفاوت‌هایی در مرورگرهای مختلف وجود دارد و شما پیش از انتشار سایت خود باید آن را در مرورگرهای گوناگون آزمایش کنید
      با این حال تا جایی که من آزمایش کردم، این ویژگی‌ها حداقل در مرورگرهای متداول به صورت مشابه نمایش داده می‌شود.

  2. مهتدی می‌گوید:

    عالی بود و سپاس‌گزارم

  3. مجتبی حاجی وندیان می‌گوید:

    واقعا مطلب مفیدی بود.

پاسخ دادن به مجتبی حاجی وندیان لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>