تعلم التصميم باستخدام CSS
خاصية clear مهمة جدًا للتحكم في طبيعة خاصية float. لاحظ الفرق بين المثالين التاليين
<div class="box">...</div>
<section>...</section>.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
أشعر أنني أطير فوق العناصر الأخرى!.
</div>
في هذه الحالة، عنصر section هو في الحقيقة بعد العنصر div. ومع ذلك، فإن العنصر div موجود في يسار الشاشة. إليك تفسير ما حصل: النص الموجود في عنصر section ملتف حول العنصر div، وأما العنصر section فإنه ملتف على كامل الصفحة. ماذا لو أردنا أن يظهر العنصر section بعد العنصر الآخر؟
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
أشعر أنني أطير فوق العناصر الأخرى!.
</div>
باستخدام هذه الخاصية clear قمنا بتحريك القسم أسفل العنصر div. استخدم القيمة left لجعل العناصر في اليسار. كما يمكنك استخدام القيم: right، وboth.
