العناصر العائمة باختصار هي انتقال جسم معين إلى أحد الجهتين اليسار أو اليمين على نفس الخط
خاصية الطفو مهمة جدا خصوصا بالنسبة للدين يرغبون بالدخول بمجال تصميم الويب Frontend developers
فمثلا عندما نود وضع صورة ونرغب بوضع نص بجانب تلك الصورة فنحن نحتاج الى تعويم النص

title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
هدا الكود اعلاه سيكون بهدا الشكل
<div> // الحاوية الاب
<img style="float: left;" src="image.png" /> // وضع خاصية الطفو لتسمح الصور للعناصر بالطفو بجانبها
<h2>title</h2> // العناصر التي ستطفى على يسار الصورة
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
</div>
باختصار وضعنا حاوية بداخلها صورة و العنوان والنص اللدان سيطفوان على الصورة
اعطينا للصورة خاصية الطفو على اليسار float:left
لكي تسمح برفع بتعويم العناصر اليها وطبعا نحن نقصد الحاوية الابن التي تحتوي على النص والعنوان
بالأمكان أيضا ان نضع كلاس للصورة ثم نكتب بملف css
.float-item{
float:left;
}
ولكن مادا لو اردنا ان تطفو الصور على يمين النص؟
هنا يجب ان نعطي خاصية الطفو على اليمين للصورة لكي تنزاح نحو اقصى اليمين وترفع اليها النص لكي تعومه على يمينها كما في الشكل

title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
<div>
<img style="float: right;" src="/uploads/category/21/image-vignette/icons8-css3-100.png"/>
<h2>title</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing </p>
</div>
في الحقيقة بهدا المثال ليس النص هو الدي يطفو وانما العنصر الدي نعطيه خاصية الطفو هو الدي يطفو (الصورة)
يمكن تحديد قيم خاصية التعويم : left, right, none
طوفان الحاويات DIV
DIV1
DIV2
DIV3
الكود
<div class="box red"></div>
<div class="box green"></div>
<div class="box blue"></div>
التنسيق
.box{
float: left;
width: 200px;
height: 200px;
}
.red{
background:red;
}
.green{
background:green;
}
.blue{
background:blue;
}
باختصار قمنا بتحديد خاصية الطفو لجميع الحاويات divs لكي تطفو الواحدة تلو الاخرى لكن حددنا مساحة للحاويات تقدر ب 200 بكسل
لان الحاويات بشكلها الافتراضي تأخد كامل عرض الصفحة من اليمين الى اليسار وبالتالي لن تعمل خاصية الطفو في حال ما ادا استولى العنصر كل عرض الصفحة لانه لايوجد مكان يسمح للعناصر بالطوفان بها.لهدا السبب حددنا عرض الحاوية ب 200 بكسل حتى تتسع مساحة عرض الصفحة للحاويات الثلاثة بسطر واحد