الطفو Float

شاهد المثال التالي

باستخدام CSS يمكنك طفو العناصر لليمين أو اليسار كما تسمح للعناصر الأخرى بالالتفاف حولهم

تستخدم خاصية الطفو بشكل عام مع الصور ولكن تستخدم أيضاً بشكل مثالي مع هيكل تصميم الموقع

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

تطفو العناصر بشكل افقي فقط أي يمكن للعناصر أن تطفو باتجاه اليمين right أو اليسار left ولكن ليس للأعلى أو للأسفل

ستلتف العناصر الأخرى عند طفو العناصر الأخرى لليمين أو اليسار

لن تتأثر العناصر التي تقع قبل العناصر الطافية

اذا تم طفو صورة لليمين فإن النص سيلتف حولها من جهة اليسار

مثال

img
{
float:right;
}

اكتب الكود بنفسك

يمكن أن تطفو العناصر بجانب بعضهم اذا كان هناك مساحة فارغة

في هذا المثال قمنا بانشاء ألبوم للصور باستخدام خاصية طفوfloat الصور

.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

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

تحدد خاصية المسح clear أي العناصر ستصبح جانب العناصر الطافية وأي العناصر لا .

أضف نص صغير تحت الصورة في الألبوم مستخدماً خاصية المسح clear

مثال

.text_line
{
clear:both;
}

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة،هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة