شاید بارها با کلمه clearing floats یا پاکسازی شناورها در طراحی تحت وب مواجه شده باشید. اما آیا می‌دانید این روش چیست و برای چه از آن استفاده می‌شود؟ عناصری که به وسیله‌ی ویژگی float در CSS به سمت چپ یا راست شناور شده باشند به درستی نمی‌توانند ارتفاع عنصر والدی که در آن قرار دارند را افزایش دهند. برای درک بهتر کدهای زیر را مشاهده کنید:
#main_container {
width: 400px;
margin: 20px auto;
border: 2px solid #CCC;
padding: 5px;
}
.floated_box {
float: left;
width: 100px;
height: 100px;
border: 1px solid #990000;
margin: 10px;
}<div id="main_container">
<p>Some content.</p>
<div class="floated_box"></div>
<div class="floated_box"></div>
<div class="floated_box"></div>
<div class="floated_box"></div>
<div class="floated_box"></div>
</div>DIVهایی با کلاس floated_box درون یک DIV والد با شناسه main_container قرار دارند، اما همانطور که در تصویر زیر مشاهده می‌کنید، تصور می‌شود که DIVهای با کلاس floated_box خارج از عنصر والد خود قرار دارند.
برای برطرف کردن این مشکل یک راهکار ساده وجود دارد و آن هم استفاده از ویژگی clear در CSS است. این DIV خالی را بعد از آخرین عنصر شناور خود قرار دهید:
<div style="clear: both;"></div>
همانطور که مشاهده می‌کنید با ویژگی clear و با مقدار دهی both به آن، مشکل ارتفاع عنصر والد حل شد.
دیدگاه