آموزش ویژگی clear در CSS

وقتی که از ویژگی float استفاده می کنیم، و می خواهیم عنصر بعدی در زیر (نه در سمت چپ یا راست) قرار گیرد، باید از ویژگی clear استفاده کنیم. ویژگی clear مشخص می کند که برای عنصری که پس از یک عنصر float شده قرار می خواهد بگیرد، چه اتفاقی باید بیفتد.
ویژگی clear می تواند یکی از مقادیر زیر را داشته باشد:
1. none : عنصر مورد نظر در زیرِ سمتِ چپ، یا سمتِ راستِ عناصر شناور(float) شده، فشار داده نمی شود(قرار نمی گیرد). این پیش فرض است.

2. left : عنصر مورد نظر در زیرِ سمتِ چپِ عناصر شناور(float) شده قرار داده می شود.

3. right : عنصر مورد نظر در زیرِ سمتِ راستِ عناصر شناور(float) شده قرار داده می شود. 

4. both : عنصر مورد نظر در زیرِ هردویِ سمتِ راست و چپِ عناصر شناور(float) شده قرار داده می شود.

5. inherit : عنصر مورد نظر، مقدار clear را از والد خود به ارث می برد.

 وقتی از حالت شناور(float) را پاک(clear) می کنیم، باید پاک کردن ما متناسب با شناور بودن باشد: یعنی اگر شناور بودن(float) برابر با left است، آنگاه باید clear برابر با left شود. با انجام این کارها، عنصر شناور شده ی ما هنوز شناور(float) باقی می ماند اما عنصر clear شده در زیر آن، در صفحه ی وب، نمایش داده می شود.

div1 {
  float: left;
}

div2 {
  clear: left;
}

هک clearfix

اگر یک عنصر که float شده است، بلندتر از عنصر دربردارنده ی خود باشد، از عنصر دربردارنده ی خود سرریز(overflow) می شود. ما می توانیم از یک هک clearfix برای حل این مشکل استفاده کنیم:

.clearfix {
  overflow: auto;
}

دستور overflow: auto تا زمانی که بتوانیم margin ها و padding ها را به خوبی کنترل کنیم، کار می کند( در غیر این صورت، با نوار های اسکرول مواجه خواهید شد). با این حال، یک هک جدید و مدرن clearfix که برای استفاده ایمن تر است، در کد زیر استفاده می شود که برای اکثر صفحات وب مورد استفاده قرار می گیرد:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

نکته: بعداً در مورد شبه عنصر after:: نکات بیشتری خواهید آموخت.