الخاصية clear

الخاصية clear في CSS تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة (floating elements) المجاورة له أو يجب أن يُحرَّك إلى الأسفل (يسمى هذا الفعل بالمصطلح clear)؛ يمكن تطبيق هذه الخاصية على العناصر العائمة وغير العائمة على حدٍ سواء.

/* الكلمات المحجوزة */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* القيم العامة */
clear: inherit;
clear: initial;
clear: unset;

عند تطبيق هذه الخاصية على العناصر غير العائمة، فستُحرِّك حافة الإطار التابع للعنصر إلى الأسفل حتى تصبح أدنى من حافة الهوامش (margin) لجميع العناصر العائمة المرتبطة بها، وهذا الحركة (عندما تحدث) ستؤدي إلى عدم حدوث انهيار للهوامش (margin collapsing).

عند تطبيق هذه الخاصية على العناصر العائمة، فستُحرِّك حافة الهوامش للعنصر حتى تصبح أدنى من حافة الهوامش لجميع العناصر العائمة المرتبطة بها، وهذا ما يؤثر على موضع العناصر العائمة التي تلي هذا العنصر، لأن العناصر العائمة اللاحقة لا يمكن أن تكون في موضع أعلى من التي تسبقها.

العناصر العائمة المرتبطة هي العناصر العائمة الموجودة في نفس الكتلة (block) التنسيقية.

ملاحظة: إذا احتوى أحد العناصر على عناصر عائمة فقط، فإن ارتفاعه سيتعرض لانهيار (height collapse)، وستصبح قيمته معدومة، وإذا أردتَ أن يكون حجمه تلقائيًا، أي أنها سيحتوي على العناصر العائمة داخله، فيجب عمل clear للعناصر الأبناء، وهذا يسمى clearfix، وإحدى طرائق فعل ذلك هي استخدام الخاصية clear في العنصر الزائف (pseudo-element) المسمى ‎::after .

#container::after { 
  content: "";
  display: block; 
  clear: both;
}

القيمة الابتدائية	none
تُطبَّق على	العناصر الكتلية (block-level elements).
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

مثال عن استخدام القيمة left مع الخاصية clear. شيفرة HTML:

<div class="wrapper">
  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>

شيفرة CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
  background-color: #f8f9fa;
}

.left {
  border: 1px solid black;
  clear: left;
}

.black {
  float: left;
  margin: 0;
  background-color: darkslategrey;
  color: #fff;
  width: 20%;
}

.red {
  float: left;
  margin: 0;
  background-color: salmon;
  width: 20%;
}

p {
  width: 50%;
  padding: 0.5em;
}

مثال عن استخدام القيمة right مع الخاصية clear:

<div class="wrapper">
  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>

شيفرة CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
  background-color: #f8f9fa;
}

.right {
  border: 1px solid black;
  clear: right;
}

.black {
  float: right;
  margin: 0;
  background-color: darkslategrey;
  color: #fff;
  width: 20%;
}

.red {
  float: right;
  margin: 0;
  background-color: salmon;
  width: 20%;
}

p {
  width: 50%;
  padding: 0.5em;
}

مثال عن استخدام القيمة both مع الخاصية clear:

<div class="wrapper">
  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="both">This paragraph clears both.</p>
</div>

شيفرة CSS:

.wrapper {
  border: 1px solid black;
  padding: 10px;
  background-color: #f8f9fa;
}

.both {
  border: 1px solid black;
  clear: both;
}

.black {
  float: left;
  margin: 0;
  background-color: darkslategrey;
  color: #fff;
  width: 20%;
}

.red {
  float: right;
  margin: 0;
  background-color: salmon;
  width: 20%;
}

p {
  width: 50%;
  padding: 0.5em;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	3.5	1.0

البنية العامة

القيمة none

كلمة محجوزة تُشير إلى أنَّ العنصر لن يتحرك إلى الأسفل لإفراغ مكان (clear) العناصر العائمة السابقة.

القيمة left

كلمة محجوزة تُشير إلى أنَّ العنصر لن يتحرك إلى الأسفل لإفراغ مكان (clear) العناصر العائمة السابقة الموجودة على اليسار.

القيمة right

كلمة محجوزة تُشير إلى أنَّ العنصر لن يتحرك إلى الأسفل لإفراغ مكان (clear) العناصر العائمة السابقة الموجودة على اليمين.

القيمة both

كلمة محجوزة تُشير إلى أنَّ العنصر لن يتحرك إلى الأسفل لإفراغ مكان (clear) العناصر العائمة السابقة الموجودة على اليسار واليمين.

البنية الرسمية

clear: none | left | right | both | inline-start | inline-end;

مصادر ومواصفات

• مسودة CSS Logical Properties Level 1. أضافت هذه المسودة القيم inline-start و inline-end.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.