الغرق في CSS

يحدد خاصية float في CSS ما إذا كان يجب أن يطفو الصندوق أم لا. خاصية float في CSS هي خاصية تحديد الموضع. تستخدم لسحب العنصر إلى اليسار أو اليمين، مما يسمح للأعمدة الأخرى بالتدفق حوله، ويُستخدم عادة للصور والتصميمات.　　　

عناصر المطفية في CSS

يمكنك توجيه العنصر إلى اليسار أو اليمين، ولكن هذا ينطبق فقط على العناصر التي لا تكونموضع مطلقالعناصر المضيفة للصناديق. ستعبر أي عناصر تتبع العنصر المطفى حول العنصر المطفى.

يمكن أن يكون لديها الخاصية float واحدة من الثلاثة القيم التالية:

كيف يطفو العنصر

سيتم سحب العنصر المطفى من التدفق العادي، وسيتم تحريكه إلى اليسار أو اليمين في مساحة العنصر المضيف قدر الإمكان.

إلا إذا كانتclearالخصائص تمنع تدفق العناصر الأخرى، وإلا ستدور العناصر حول العناصر المطفية. العناصر تتدفق أفقياً، مما يعني أن العناصر يمكن أن تتدفق فقط إلى اليسار أو اليمين، وليس للأعلى أو للأسفل.

img {
　　　　float: left;
}

إذا كانت العناصر المطفية المترابطة تتكون من عدة عناصر، فإنها ستتدفق بجانب بعضها البعض إذا كان هناك مساحة أفقيًا. إذا لم يكن هناك مساحة كافية لتشغيل العناصر المطفية، فإنها ستتحرك إلى الأسفل حتى تناسب أو حتى لا يوجد المزيد من العناصر المطفية.

.thumbnail {
　　　　float: left;
　　　　width: 125px;
　　　　height: 125px;
　　　　margin: 10px;
}

استخدام خصائص (Clear) لإغلاق المطفية

العناصر التي تأتي بعد العنصر المطفى ستتدفق حولها. يحدد خصائص clear الجانب الذي لا يمكن فيه وضع عناصر متدفقة أخرى في حجب العنصر.

.clear {
　　　　clear: left;
}