آموزش clear در css

CSS Clear Property

در استفاده از خاصیت float شما ممکن است با مشکلاتی نظیر این که نمی توانید زیر تصویری که با استفاده از float به سمتی برده شده است چیزی بنویسید و باید چند بار پشت سر هم اینتر بزنید ، روبرو خواهید شد. مشکل وقتی پر رنگ تر خواهد شد که شما با می خواهید یک جدول با استفاده از آن خاصیت بسازید و یا یک منو CSS بسازید و یا ...

شما با استفاده از این خاصیت در سی اس اس می توانید چنین مشکلاتی را به کلی بر طرف کنید و خودتان مکان دقیقی که می خواهید را با استفاده از float مشخص کنید.

شما میتوانید ساده ترین کاربرد آن را در این صغحه مشاهده کنید. همونطور که می بینید اگر کد زیر را قرار نداده بودیم نمی توانستیم عبارت "thanks a lot" را زیر کلمه "CSS" بیاوریم الا این که چند br اضافی می گذاشتیم.

<div style="clear:both;"></div>

خاصیت clear چه کار می کند؟

این خاصیت باعث می شود که از تگی که این خاصیت را دارد به پایین خاصیت های float از کار بیفتد. برای مثال شما می توانید خاصیت های float:right را با استفاده از clear:right از بین ببرید. در این حالت شما اگر متنی را زیر آن بنویسید متن به زیر تگی که clear دارد خواهد آمد.

در اکثر مواقع به جای استفاده از right و left از both استفاده می کنند که معنی "هر دو" را می دهد.

مقدار های خاصیت clear

این خاصیت دارای 5 مقدار می باشد. این مقدار ها به این گونه اند:

• right : خاصیت های float:right را خنثی می کند.
• left : خاصیت های float:left را حنثی می کند.
• both : هر دو خاصیت راست و چپ float را خنثی می کند.
• none : هیچ کاری انجام نمی دهد.
• inherit : هر کاری که تگ مادرش انجام می داده انجام میدهد (در مورد خاصیت clear هر مقداری که داشته برای آن نیز استفاده می شود.)