ویژگی clear بطور مستقیم با ویژگی float در ارتباط می باشد. کار آن ویژگی آن می باشد که اطراف عنصر شناور را پاکسازی کند تا عناصر دیگر به پایین عنصر شناور سقوط کنند.

ویژگی float به دنیای وب معرفی شد تا بتوانیم طرحی شبیه به مجلات و همچنین روزنامه ها داشته باشیم. جایی که عکسی را به دیدن کردن و نمایش می گذارند و همچنین متن دور آن هم تصویر جریان پیدا می کند:

حال کار ویژگی clear آن می باشد که از جریان دادن عناصر در کنار عنصری که شناور شده می باشد جلوگیری کند.

در صورتی که عنصری دارید که در سمت راست آن هم عنصری شناور به سمت راست (float: right) وجود دارد و همچنین می خواهید عنصر تو در کنار آن هم عنصر قرار نگیرد و همچنین به پایین آن هم سقوط کند کافی می باشد مقدار clear آن هم را برابر با right قرار دهید.

در مثال زیر تصویر به سمت راست شناور شده می باشد در پس نتیجه آن می شود که متن در کنار و همچنین پایین آن هم جمع شده می باشد:

See the Pen float/clear by Mojtaba Seyedi (@seyedi) on CodePen.

همانطور که دیدن می کنید جذاب و جالب نیست که قستی از لیست در کنار تصویر و همچنین قستی دیگر در زیر آن هم قرار بگیرند. جهت جلوگیری از آن کار می توانیم به عنصر ul ویژگی clear را با مقدار right بدهیم تا از آن مشکل نجات پیدا کنیم:

See the Pen clear by Mojtaba Seyedi (@seyedi) on CodePen.

همینطور می توانید جهت اطمینان اکثرا و بیشتر در مورد بعدی از مقدار both بهره بری و استفاده کنید تا در صورتی که عنصری به سمت چپ لیست نیز شناور شد از جمع شدن لیست در کنار آن هم هم جلوگیری می شود.

یکی از کاربردهای آن ویژگی مقابله با اشکالی می باشد که ویژگی float جهت عنصر نگهدارنده بجود می آورد. در مورد آن مطلب می توانید اینجا اکثرا و بیشتر بخوانید.

پشتیبانی نرم افزار مرورگر اینترنتی ها

ویژگی clear در تمام مرورگرهای اصلی از قبیل کروم, فایرفاکس, سافاری, اپرا, اینترنت اکسپلورر, آندروید و همچنین iOS پشتیبانی می می شود.