ویژگی clear در css سقوط تگ html به پایین تگ شناور

ویژگی clear در css سقوط تگ html به پایین تگ شناور

در این مقاله از سایت آموزی به بررسی و تحلیل صفت clear در زبان سی اس اس می پردازیم.

ویژگی clear در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.

ویژگی clear در css سقوط تگ html به پایین تگ شناور - سایت آموی

معرفی ویژگی کاربردی clear در زبان طراحی css

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

در این حالت تگ های html دیگر به پایین تگ html شناور سقوط می کنند.

شما می توانید خاصیت های float:right را با استفاده از clear:right از بین ببرید.

بر این اساس شما اگر متنی را زیر آن بنویسید متن به زیر تگی که clear دارد خواهد آمد.

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

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

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

و خودتان مکان دقیقی که می خواهید را با استفاده از clear مشخص کنید.

مقادیر صفت کاربردی clear در زبان طراحی سی اس اس

صفت کاربردی clear که در زبان طراحی CSS3 معرفی شده است، 5 مقدار می پذیرد که عبارتند از:

مقدار none
مقدار right
مقدار left
مقدار both
مقدار initial

مقدار none درون خاصیت clear در زبان css

اگر خاصیت clear را برابر با مقدار none در یک تگ html قرار دهیم، یعنی خاصیت clear برای تگ html مربوطه اعمال نشود.

مقدار none ، مقدار پیش فرض خاصیت clear می باشد.

مثال براساس مقدار none برای خاصیت clear

[html]body{clear: none;}[/html]

مقدار right درون این خاصیت در زبان سی اس اس

اگر خاصیت clear را برابر با مقدار right در یک تگ html که در کنارش تگی شناور با خاصیت float با مقدار right وجود دارد، قرار دهیم، خاصیت float:right را در تگ html شناور خنثی کرده ایم.

مثال براساس مقدار right برای خاصیت clear

[html]p#box{clear: right;}[/html]

مقدار left درون خاصیت clear در زبان css

اگر خاصیت clear را برابر با مقدار left در یک تگ html که در کنارش تگی شناور با خاصیت float با مقدار left وجود دارد، قرار دهیم، خاصیت float:left را در تگ html شناور خنثی کرده ایم.

مثال براساس مقدار left برای خاصیت clear

[html]p{clear: left;}[/html]

مقدار both درون این خاصیت در زبان سی اس اس

اگر خاصیت clear را برابر با مقدار both در یک تگ html که در کنارش تگی شناور با خاصیت float با مقدار right و یا خاصیت float با مقدار left وجود دارد، قرار دهیم، هر دو خاصیت float:right و float:left را در تگ html شناور خنثی کرده ایم.

در اکثر مواقع به جای استفاده از مقادیر right و left در ویژگی clear از مقدار both استفاده می کنند که معنی “هر دو” را می دهد.

مثال براساس مقدار both برای خاصیت clear

[html]body{clear: both;}[/html]

مقدار initial درون خاصیت clear در زبان css

اگر خاصیت clear را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

ویژگی clear در css سقوط تگ html به پایین تگ شناور - سایت آموزی

بررسی خاصیت clear از نظر نسخه زبان طراحی سی اس اس

خصوصیت clear در اولین نسخه زبان طراحی css یعنی CSS1 معرفی شده است.

بررسی ساختاری خصوصیت clear


عناوین ساختاری خاصیت clear	وضعیت ساختاری خاصیت clear
مقدار پیش فرض	none
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS1
سینتکس صفت در جاوا اسکریپت	"object.style.clear="both