3.7 KiB
title | localeTitle |
---|---|
Float and Clear | تعويم وواضحة |
تعويم وواضحة
تحدد خاصية float
CSS كيفية تعويم العنصر.
تحدد الخاصية clear
CSS العناصر التي يمكن أن تطفو بجانب العنصر الذي تم تطهيره وعلى أي جانب.
الخاصية float
يتم استخدام الخاصية float
لتحديد المواقع والتخطيط على صفحات الويب.
يمكن أن تحتوي الخاصية float
على إحدى القيم التالية:
left
- يطفو العنصر إلى يسار الحاوية الخاصة به right
- يطفو العنصر إلى يمين الحاوية الخاصة به none
- لا يطفو العنصر (سيتم عرضه فقط حيث يحدث في النص). هذا هو الافتراضي inherit
- العنصر يرث قيمة عائم أصله في أبسط استخدام لها ، يمكن استخدام الخاصية float
لالتفاف النص حول الصور.
تعويم في الصورة:
img { float: right; }
يحدد هذا المثال أن الصورة يجب أن تطفو إلى اليمين في صفحة:
img { float: left; }
يحدد هذا المثال أن الصورة يجب أن تطفو إلى اليسار في صفحة:
img { float: none; }
في المثال التالي ، سيتم عرض الصورة فقط في مكان حدوثها في النص ( float: none;
):
الممتلكات clear
تحدد الخاصية clear
العناصر التي يمكن أن تطفو بجانب العنصر الممسوح وعلى أي جانب.
يمكن أن تحتوي الخاصية clear
على إحدى القيم التالية:
none
- يسمح للعناصر الطافية على كلا الجانبين. هذا هو الافتراضي left
- لا يسمح بعناصر متحركة على الجانب الأيسر right
- لا يسمح بالعناصر العائمة على الجانب الأيمن both
- لا يسمح بالعناصر العائمة على اليسار أو الجانب الأيمن inherit
- يرث العنصر القيمة الواضحة لأصله الرئيسي الطريقة الأكثر شيوعًا لاستخدام الخاصية clear
هي بعد استخدام خاصية float
على عنصر.
عند إزالة العوامات ، يجب أن تتطابق مع clear
float
. إذا تم تعويم عنصر إلى left
، فعليك clear
إلى left
. سيستمر العنصر floated في float
، ولكن سيظهر العنصر الذي تم مسحه أسفله في صفحة الويب.
مثال:
div { clear: left; }
الموارد الإضافية:
- MDN CSS: Float & Clear
- W3chools الدروس
- CSS-Tricks: float & clear