
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 لتوزيع المحتوى
https://www.mohamed24119.com/2017/03/floatcss.html