الفرق بين المراجعتين ل"CSS/clear"
سطر 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>. |
مراجعة 15:02، 3 يوليو 2018
الخاصية 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">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;
انظر أيضًا
صفحة الخاصية display
التي تحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.
صفحة الخاصية float
التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
مصادر ومواصفات
- مسودة CSS Logical Properties Level 1. أضافت هذه المسودة القيم
inline-start
وinline-end
. - مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.