عن هذا الموقع

خاصية 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 قمنا بتحريك القسم أسفل العنصر div. استخدم القيمة left لجعل العناصر في اليسار. كما يمكنك استخدام القيم: right، وboth.

</section>