در باره این سایت

صفت clear برای کنترل کردن رفتار float خیلی مهم است. این دو مثال را مقایسه کنید:

<div class="box">...</div>
<section>...</section>
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box">

احساس شناور بودن می‌کنم!

</div>
<section>

در این مثال عنصر section دقیقا بعد از div آمده است. اما، از آنجایی که div به چپ شناور است، این اتفاق می‌افتد: متن درون section اطراف div محاط می‌شود و section تمام آن را احاطه می‌کند.حال اگر من می‌خواستم که section دقیقا بعد از عنصر شناور بیاید چه؟

</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

احساس شناور بودن می‌کنم!

</div>
<section class="after-box">

با استفاده از clear ما section را به پایین div شناور انتقال داده ایم. برای clear کردن عنصر‌های با مقدار شناوری left از clear:left استفاده می‌شود. و به همین ترتیب نیز برای شناوری راست استفاده می‌شود.

</section>