تخطيط CSS - عائم وواضح
تحدد خاصية CSS floatكيفية تعويم العنصر.
تحدد خاصية CSS clearالعناصر التي يمكن أن تطفو بجانب العنصر الذي تم مسحه وعلى أي جانب.
خاصية تعويم
تُستخدم floatالخاصية لتحديد موضع المحتوى وتنسيقه ، على سبيل المثال دع الصورة تطفو إلى اليسار للنص في الحاوية.
يمكن أن تحتوي floatالخاصية على إحدى القيم التالية:
-
left- العنصر يطفو على يسار الحاوية الخاصة به -
right- العنصر يطفو على يمين الحاوية الخاصة به -
none- لا يطفو العنصر (سيتم عرضه في مكان ظهوره في النص فقط). هذا هو الافتراضي -
inherit- يرث العنصر القيمة العائمة للعنصر الأصل
في أبسط استخدام لها ، floatيمكن استخدام الخاصية لالتفاف النص حول الصور.
مثال - تعويم: صحيح ؛
يحدد المثال التالي أن الصورة يجب أن تطفو إلى اليمين في النص:
الألم نفسه هو الحب ، نظام التخزين الرئيسي. Phasellus imperdiet ، لا وكان يُقال أحيانًا ، لكن الرغبة في الكراهية Maecenas هو معجب ، منتقم وليس طبخًا ، مؤلف الحياة الجماعية.
مثال
img {
float: right;
}
مثال - تعويم: يسار ؛
يحدد المثال التالي أن الصورة يجب أن تطفو إلى اليسار في النص:
الألم نفسه هو الحب ، نظام التخزين الرئيسي. Phasellus imperdiet ، لا وكان يُقال أحيانًا ، لكن الرغبة في الكراهية Maecenas هو معجب ، منتقم وليس طبخًا ، مؤلف الحياة الجماعية.
مثال
img {
float: left;
}
مثال - لا تعويم
في المثال التالي ، سيتم عرض الصورة فقط في مكان ظهورها في النص (float: none ؛):
الألم نفسه هو الحب ، نظام التخزين الرئيسي. Phasellus imperdiet ، لا وكان يُقال أحيانًا ، لكن الرغبة في الكراهية Maecenas هو معجب ، منتقم وليس طبخًا ، مؤلف الحياة الجماعية.
مثال
img {
float: none;
}
مثال - تطفو بجانب بعضها البعض
عادةً ما يتم عرض عناصر div فوق بعضها البعض. ومع ذلك ، إذا استخدمنا ، float: leftيمكننا ترك العناصر تطفو بجانب بعضها البعض:
مثال
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}