الفرق بين المراجعتين ل"CSS/clear"
جميل-بيلوني (نقاش | مساهمات) ط |
|||
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
سطر 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"> | + | <p class="black">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p> |
− | <p class="red"> | + | <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p> |
− | <p class="left"> | + | <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"> | + | <p class="black">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p> |
− | <p class="red"> | + | <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p> |
− | <p class="right"> | + | <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"> | + | <p class="black">حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى.</p> |
− | <p class="red"> | + | <p class="red"> توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.</p> |
− | <p class="both"> | + | <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
التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
مصادر ومواصفات
- مسودة CSS Logical Properties Level 1. أضافت هذه المسودة القيم
inline-start
وinline-end
. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.