شرح خاصية float لتوزيع المحتوى

أهلا بكم في كود ويب

أهلا بكم في درس جديد من دروس 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 لتوزيع هذه الطبقة للجهة اليسري a1
a2