الفرق بين المراجعتين ل"CSS/clear"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط
 
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>clear</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>clear</code>}}</noinclude>
الخاصية <code>clear</code> في CSS تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة (floating elements) المجاورة له أو يجب أن يُحرَّك إلى الأسفل (يسمى هذا الفعل بالمصطلح clear)؛ يمكن تطبيق هذه الخاصية على العناصر العائمة وغير العائمة على حدٍ سواء.
+
الخاصية <code>clear</code> في [[CSS]] تُحدِّد إذا كان العنصر يمكن أن يكون بجوار العناصر العائمة (floating elements) المجاورة له أو يجب أن يُحرَّك إلى الأسفل (يسمى هذا الفعل بالمصطلح clear)؛ يمكن تطبيق هذه الخاصية على العناصر العائمة وغير العائمة على حدٍ سواء.
  
 
== بطاقة الخاصية ==
 
== بطاقة الخاصية ==
سطر 48: سطر 48:
  
 
== أمثلة ==
 
== أمثلة ==
مثال عن استخدام القيمة <code>left</code> مع الخاصية <code>clear</code>. شيفرة HTML:<syntaxhighlight lang="html">
+
مثال عن استخدام القيمة <code>left</code> مع الخاصية <code>clear</code>. شيفرة [[HTML]]:<syntaxhighlight lang="html">
 
<div class="wrapper">
 
<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="black">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p>
   <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+
   <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p>
   <p class="left">This paragraph clears left.</p>
+
   <p class="left">clears left الخاصية المسندة إلى هذا النص هي</p>
 
</div>
 
</div>
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
سطر 87: سطر 87:
 
</syntaxhighlight>مثال عن استخدام القيمة <code>right</code> مع الخاصية <code>clear</code>:<syntaxhighlight lang="html">
 
</syntaxhighlight>مثال عن استخدام القيمة <code>right</code> مع الخاصية <code>clear</code>:<syntaxhighlight lang="html">
 
<div class="wrapper">
 
<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="black">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p>
   <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+
   <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p>
   <p class="right">This paragraph clears right.</p>
+
   <p class="right">clears right الخاصية المسندة إلى هذا النص هي</p>
 
</div>
 
</div>
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
سطر 124: سطر 124:
 
</syntaxhighlight>مثال عن استخدام القيمة <code>both</code> مع الخاصية <code>clear</code>:<syntaxhighlight lang="html">
 
</syntaxhighlight>مثال عن استخدام القيمة <code>both</code> مع الخاصية <code>clear</code>:<syntaxhighlight lang="html">
 
<div class="wrapper">
 
<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="black">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p>
   <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+
   <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p>
   <p class="both">This paragraph clears both.</p>
+
   <p class="both">clears both الخاصية المسندة إلى هذا النص هي</p>
 
</div>
 
</div>
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
 
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
سطر 194: سطر 194:
 
clear: none | left | right | both | inline-start | inline-end;
 
clear: none | left | right | both | inline-start | inline-end;
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== انظر أيضًا ==
 +
صفحة الخاصية  <code>[[CSS/display|display]]</code> التي تحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.
 +
 +
صفحة الخاصية <code>[[CSS/float|float]]</code>  التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
 
== مصادر ومواصفات ==
 
== مصادر ومواصفات ==
 
* مسودة [https://drafts.csswg.org/css-logical-props/#float-clear CSS Logical Properties Level 1]. أضافت هذه المسودة القيم <code>inline-start</code> و <code>inline-end</code>.
 
* مسودة [https://drafts.csswg.org/css-logical-props/#float-clear CSS Logical Properties Level 1]. أضافت هذه المسودة القيم <code>inline-start</code> و <code>inline-end</code>.

المراجعة الحالية بتاريخ 11:18، 7 أكتوبر 2022

الخاصية 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  التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.

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