یکی از مشکلاتی که اغلب برنامه نویسان در کار کردن با float در کدهای css با آن مواجه میشوند، عدم گسترش div پدری است که محتوای آن از خصیصه float استفاده کرده است. به مثال زیر توجه کنید:
<div style="background-color: #ffaf00; padding:10px 10px 10px 10px;">
<div style="background-color: #1777b1; width: 400px; margin: 0px; height: auto; float: right">
<div style="background-color: White; margin: 10px; float: right; padding:10px 10px 10px 10px;">
this Div have float: right;
<br />
<br />
line 1
<br />
<br />
<br />
line 2
div>
<div style="background-color: White; margin: 10px; float: right; padding:10px 10px 10px 10px;">
this Div have float: right;
<br />
<br />
line 1
<br />
<br />
<br />
line 2
div>
div>
div>
-b950f743-a24c-48cd-a3fb-b042fafa3c97.jpg)
در مثال بالا divهای سفید و آبی رنگ دارای خصیصه float:right هستند و هر دو به صورت عادی گسترش یافته اند.اما div نارنجی رنگ به بالا چسبیده و مثل حالتی است که هیچ محتوایی ندارد.
جهت برطرف کردن این مشکل تنها کافیست به div نارنجی رنگ خصیصه overflow:hidden را تخصیص دهیم. که در این حالت خروجی به شکل زیر خواهد شد:
-a3f101d9-00a8-4905-b4df-5aceb3dd7a2b.jpg)