ویژگی clear در CSS

clear Property

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

نحوه نوشتار

clear: none;
clear: left;
clear: right;
clear: both;

مقادیر

none​

عنصر را حرکت نمی دهد تا عناصر ما قبل از خود با مقدار مشخص float در کنار این عنصر قرار بگیرند.

left​

عنصر مورد نظر را به یک سطح پایین تر حرکت می دهد تا در کنار عنصر دیگر با ویژگی float: left قرار نگیرد.

right​

عنصر مورد نظر را به یک سطح پایین تر حرکت می دهد تا در کنار عنصر دیگر با ویژگی float: right قرار نگیرد.

both​

عنصر مورد نظر را به یک سطح پایین تر حرکت می هد تا در کنار عناصری با مقدار مشخص float قرار نگیرد.

در مثال زیر نحوه کارکرد این ویژگی را مقادیر مختلف می بینیم:

html

<div class="box1"></div>
<p>
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</p>
<hr />
<div class="box1"></div>
<p class="cl-left">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</p>
<hr />
<div class="box2"></div>
<p class="cl-right">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
</p>
<hr />
<div class="box2"></div>
<div class="box3"></div>
<p class="cl-both">
      لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و بی‌معنی
      در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. 
</p>

css

div {
    width: 100px;
    height: 100px;
    background-color: tomato;
}
.box1,.box3 {
    float: left;
}
.box2 {
    float: right;
}
.cl-left {
    clear: left;
}
.cl-right {
    clear: right;
}
.cl-both {
    clear: both;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.