CSS/clear

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

بطاقة الخاصية

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

/* الكلمات المحجوزة */
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;
}

أمثلة

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

<div class="wrapper">
  <p class="black">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p>
  <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p>
  <p class="left">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">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p>
  <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p>
  <p class="right">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">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p>
  <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p>
  <p class="both">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;

انظر أيضًا

صفحة الخاصية display التي تحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.

صفحة الخاصية float  التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.

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

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