در HTML وقتی المنت هایی دارای شناوری (float) هستند، باعث از بین رفتن ارتفاع ماثر المنت پدر خود می شوند که این امر در بسیاری مواقع باعث بهم ریختن ساختار یک صفحه می گردد.


<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

برای رفع این مشکل راههای زیادی وجود دارد که هر کدام در جایی کارایی کافی را ندارند، در زیر به ارائه روشی می پردازیم که در تمامی مرورگرهای جدید عملکرد مناسبی داشته و با کمی ایجاد تغییر در مرور گرهای قدیمی تر نیز قابل اجرا خواهد بود.

برای این کار از CSS کمک می گیریم:


.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

این روش برای مرورگر IE8 به بالا صحیح کار می کند، برای ایجاد سازگاری بیشتر با مرورگرهای قدیمی می توان آن را بصورت زیر بهینه سازی کرد.


.clearfix:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}