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

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

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

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

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

<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 مشخص شود، عنصر بیرونی به اندازه‌ی محتوای عنصر درونی گسترش می‌یابد و حاشیه‌ی عنصر درونی خارج از محدوده‌ی عنصر بیرونی قرار می‌گیرد.
به مثال زیر توجه کنید:

<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 قرار دهیم، این مشکل حل می‌شود.

<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