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 ، ولكن سيظهر العنصر الذي تم مسحه أسفله في صفحة الويب.
مثال:
المصدر: CSS-TRICS
div { clear: left; }
المصدر: CSS-TRICS
الموارد الإضافية:
- MDN CSS: Float & Clear
- W3chools الدروس
- CSS-Tricks: float & clear