استفاده ویژگی 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

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

دیدگاهتان را بنویسید

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