أهلا بكم في درس جديد من دروس css وفي هذا الدرس سوف نتعرف على خاصية جديدة من خواص css وهي خاصية float تعنى الطفو من خلال استخدام هذه الخاصية يمكننا توزيع تخطيط موقعنا أو تخطيط إضافة أو شكل ما كما نريد مثل جعل اتجاه هذه الطبقة في الجهة اليمنى من الصفحة وهذه من الجهة اليسرى من الصفحة وهكذا وهذه الخاصية تشمل ثلاث قيم وهي right يمين , left يسار , none لا شيئ وتكتب الخاصية بين هذين الرمزين {} ثم نضيف نقطتين هكذا : ثم نكتب القيمة كما نريد ثم ننهي القيمة بهذه العلامة ;
float:right;
float:left;
float:none;
مثال
<div class='all'>
<div class='a1'>a1</div>
<div class='a2'>a2</div>
</div>
<style>
.all{width:100%;height:125px;background:#ccc;padding:5px;margin:0 auto;overflow:hidden;}
.a1{background:#206ec1;float:right;}
.a2{background:#9C27B0;float:left;}
.a1,.a2{width:40%;height:115px;line-height:115px;text-align:center;color:#fff;}
</style>
النتيجة
في المثال التالى استخدمنا عنصر div كطبقة ثم فئة class ثم المعرف قمنا بتسميته all وأغلقنا عنصر div ثم أضفنا بداخله عدد 2 div لإنشاء طبقتين جديدتين ثم فئة class ثم معرف الطبقة الأولى بإسم a1 ومعرف الطبقة الثانية بإسم a2
ثم قمنا بالتعديل على هذه الطبقات من خلال أكواد css وجعلنا معرف a1 يأخذ مساحة عرض 40% واستخدمنا خاصية float:right لتوزيع هذه الطبقة للجهة لليمنى وجعلنا معرف a2 يأخذ مساحة 40% واستخدمنا خاصية float:left لتوزيع هذه الطبقة للجهة اليسري
ثم قمنا بالتعديل على هذه الطبقات من خلال أكواد css وجعلنا معرف a1 يأخذ مساحة عرض 40% واستخدمنا خاصية float:right لتوزيع هذه الطبقة للجهة لليمنى وجعلنا معرف a2 يأخذ مساحة 40% واستخدمنا خاصية float:left لتوزيع هذه الطبقة للجهة اليسري
a1
a2
شرح خاصية float لتوزيع المحتوى