ویژگی clear در CSS

هنگامی‌ که از ویژگی float استفاده می کنیم، امکان تداخل المان های بعدی با المان شناور پیش می آید.

المان شناور
المان بعدی

برای حل این مشکل باید از ویژگی clear استفاده کرد.

المان شناور
المان بعدی

ویژگی clear باعث پاک شدن اثر شناور بودن المان قبلی می شود.

ویژگی clear مقدارهای زیر را می پذیرد:

  • none: پیش فرض
  • left: اثر شناور را از چپ را پاک می کند.
  • right : اثر شناور را از راست را پاک می کند.
  • both: اثر شناور را از راست و چپ پاک می کند.

نکته: برای آشنایی کامل با ویژگی float به درس ویژگی float در CSS مراجعه کنید.

مقدار right در clear

مقدار right در ویژگی clear باعث پاک شدن اثر شناور بودن از راست می شود، و تگ های بعدی به پایین المان شناور می‌روند.

clear: right;

مقدار left در clear

مقدار left در ویژگی clear باعث پاک شدن اثر شناور بودن از چپ می شود، و تگ های بعدی به پایین المان شناور می‌روند.

clear: left;

مقدار both در clear

مقدار both در ویژگی clear باعث پاک شدن اثر شناور بودن از راست و چپ می شود، و تگ های بعدی به پایین المان شناور می‌روند.

clear: both;

مقدار none در clear

مقدار none ویژگی clear، مقدار پیش‌فرض است.

در این حالت متن در چپ یا راست تصویر قرار می‌گیرد. در این حالت امکان خطا نیز وجود دارد.

clear: none;

خلاصه درس

در این آموزش با:

  • ویژگی clear و مقادیر آن
  • خطاهای موجود در float و رفع آن

آشنا شدیم.

توسعه دهندگان
احسان اسلامی