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

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

ویژگی 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 مقدار می پذیرد که عبارتند از:

  1. مقدار none
  2. مقدار right
  3. مقدار left
  4. مقدار both
  5. مقدار initial

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پشتیبانی مرورگرهای اینترنتی از خاصیت clear در زبان طراحی سی اس اس

پیوندهای مهم و کاربردی

تگ های HTML در سایت آموزی

تگ های جدید HTML5 در سایت آموزی

صفات تگ های HTML در سایت آموزی

تگ های منسوخ شده HTML5 در سایت آموزی

تگ های block level و inline level در سایت آموزی

تگ های HTML در W3school

ویژگی های CSS در سایت آموزی

ویژگی های CSS در W3schools

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