Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

[ دورة CSS ] الدروس المتقدمة CSS – الدرس الرابع – الطفو Float

Home // Blog // [ دورة CSS ] الدروس المتقدمة CSS – الدرس الرابع – الطفو Float

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

ماهو الطفو ؟؟

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


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

تطفو العناصر بشكل افقي فقط أي يمكن للعناصر أن تطفو باتجاه اليمين right أو اليسار left ولكن ليس للأعلى أو للأسفل
ستلتف العناصر الأخرى عند طفو العناصر الأخرى لليمين أو اليسار
لن تتأثر العناصر التي تقع قبل العناصر الطافية
اذا تم طفو صورة لليمين فإن النص سيلتف حولها من جهة اليسار
مثال

img
{
float:right;
}

طفو العناصر بجانب بعضهم البعض

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

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

الغاء الطفو باسستخدام خاصية clear

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

.text_line
{
clear:both;
}

جميع خصائص الطفو float
الخاصية الشرح القيم CSS
clear تحديد أي الجوانب من العنصر التي لن تتمكن من الطفو left
right
both
none
inherit
1
float تحديد طفو العنصر left
right
none
inherit
1

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " [ دورة CSS ] الدروس المتقدمة CSS – الدرس الر... "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM