الخاصية Float
كيفية عمل الخاصية float
تعمل الخاصية float على تعويم العناصر إلى اليسار أو اليمين ولكن تطبق هذه الخاصية فقط على العناصر التي لا تحتوي على القيمة absolute للخاصية position. أي عنصر تطبق عليه الخاصية float سوف يتدفق حول العنصر العائم على الجانب الآخر.
قد تحتوي الخاصية float على إحدى القيم الثلاث:
| القيمة | الوصف |
|---|---|
| left | تعمل على تعويم العنصر على الجانب الأيسر من الصندوق الذي يحتويه. |
| right | تعمل على تعويم العنصر على الجانب الأيمن من الصندوق الذي يحتويه. |
| none | تعمل على إزالة تأثير الخاصية float نهائيا |
كيف تعوم العناصر
يتم إخراج العنصر العائم من التدفق الطبيعي وتحويله إلى اليسار أو اليمين بقدر الإمكان في المساحة المتاحة للعنصر المحتوي (الأب).
تتدفق العناصر الأخرى عادةً حول العناصر الطافية ، ما لم يتم منعها من القيام بذلك من خلال الخاصية clear . يتم تعويم العناصر أفقيًا ، مما يعني أنه لا يمكن تعويم العنصر إلا لليسار أو اليمين ، وليس لأعلى أو لأسفل.
- img {
- float: left;
- }
إذا تم وضع العديد من العناصر العائمة بالقرب من بعضها البعض ، فسوف تعوم بجانب بعضها البعض إذا كانت هناك مساحة أفقية كافية. إذا لم تكن هناك مساحة كافية لتعوم ، فسيتم إزاحتها للأسفل. لنلقي نظرة على المثال التالي الذي يحتوي على مجموعة من العناصر العائمة.
- .thumbnail {
- float: left;
- margin: 5px;
- }
إيقاف تعويم العناصر باستخدام الخاصية Clear
العناصر التي تأتي بعد العنصر العائم سوف تتدفق حوله. تحدد الخاصية clear أي من جوانب صندوق العنصر لا تسمح بالعناصر العائمة الأخرى.
- .clear {
- clear: left;
- }