Float CSS شرح

بص يا أخويا نصيحة من العبد لله لو عاوز تبقى برنس في ال CSS احترف خاصية ال float و ال flex-box.
نقول تاني؛ ال float وال flex-box انا شايف انهم اهم حاجة في ال CSS ف خد وقتك وبراحتك خااااالص في ال2دول بالذات

⚠ انا الصراحة بكتب المقال ده بروقان جامد جدا عشان القهوة الى جمبى دي عامله دمااااغ عالية الصراحة 😂

نبتدى بشرح الfloat

ترجمة جوجل بتقول ان float معناها يعوم او يطفو وانا بقولك ان معناها هو: إزاحة او إنتقال العنصر جهة اليمين او جهة اليسار; يبقى float معناها إنتقال العنصر جهة ال ايه.......

خاصية الfloat لها قيمتان فقط هما:

امتا بقا نستخدم الfloat يا قيادة؟

1. لجعل العناصر بجوار بعضها ابتدأ من اليمين او اليسار (يفضل ان تكون العناصر دي متساوية في الارتفاع)
2. لجعل عنصر مُعين في أقصر اليمين او اقصى اليسار
3. لوضع مُحتوي نصي بجوار عنصر معين مثل الصور

مشاكل وحلول خاصية الfloat

اكيد انت محتاج الحل رقم 4 عشان تعمل له copy .. صح ؟!! 😂 😂
اهو يا سيدي 👇

 
.parent::after {
  content: "";
  clear: both;
  display: table;
} 

⚠ ارتفاع العنصر الFLOAT يَتحدد على حسب المحتوى الذى بداخل العنصر.
⚠ معظم مشاكل الfloat يتم حلها بخاصية الflexbox

الخلاصة

1. من الاخر كده الfloat مليان مشاكل وعيوب و الflexbox يعالج معظم المشاكل دي
2. نستخدم الfloat في حالات بسيطة جداً مثل تحريك عنصر اقصى اليمين او اقصى اليسار
3. طيب بما ان الfloat وحش اوي كده طب انا قولت في الأول ان الfloat مهم ليه؟

ج/ لان تقريبا 91% من المواقع معموله بالfloat لان خاصية الflexbox حاجة جديدة على الCSS وبالتالي لو جالك موقع تعدل عليه اكيد 100% هتقابل الfloat وهيبقى يومك طين لو مش مُذاكر float كويس 😊