CSS Float تعويم العناصر

CSS - الخاصية float و clear

🔸 تُستخدم خاصية float لتحريك العنصر إلى اليسار أو اليمين داخل الحاوية، بحيث يمكن للعناصر التالية الالتفاف حوله. وهي مفيدة لترتيب الصور بجانب النصوص أو تقسيم الصفحة إلى أعمدة.

🔹 القيم المتاحة للـ float

• left: يجعل العنصر يطفو إلى اليسار.
• right: يجعل العنصر يطفو إلى اليمين.
• none: لا يطفو (افتراضي).
• inherit: يرث القيمة من العنصر الأب.

🧪 مثال على float: left

<div style="float: left; width: 200px; height: 100px; background-color: lightblue;">
  عنصر يطفو لليسار
</div>

<p>
  هذا النص سيلتف حول العنصر المُطفى إلى اليسار.
</p>

🧪 مثال على float: right

<div style="float: right; width: 200px; height: 100px; background-color: lightgreen;">
  عنصر يطفو لليمين
</div>

<p>
  هذا النص سيلتف حول العنصر المُطفى إلى اليمين.
</p>

🧹 CSS Clear - منع الالتفاف حول العناصر

في بعض الأحيان، بعد عناصر float، قد تحتاج إلى منع العناصر التالية من الالتفاف حولها. هنا نستخدم clear.

🔹 القيم المتاحة للـ clear

• left: لا تسمح بالالتفاف على يسار العنصر.
• right: لا تسمح بالالتفاف على يمينه.
• both: لا تسمح بالالتفاف على أي جانب.
• none: تسمح بالالتفاف (افتراضي).

🧪 مثال على استخدام clear

<div style="float: left; width: 100px; height: 100px; background-color: orange;"></div>

<div style="clear: both;">
  هذا العنصر سيبدأ أسفل جميع العناصر الطافية
</div>

💡 طريقة شائعة لتصفية (clearfix) العناصر بعد float

إذا كان لديك حاوية تحتوي عناصر مطفوّة، فقد تنهار الحاوية (لا تحتوي العناصر). لحل المشكلة نستخدم clearfix.

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

🧪 استخدام clearfix داخل HTML

<div class="clearfix">
  <div style="float: left; width: 50%; background-color: pink;">عمود 1</div>
  <div style="float: left; width: 50%; background-color: lightgray;">عمود 2</div>
</div>

📌 ملاحظات هامة

• خاصية float كانت تُستخدم كثيرًا قبل ظهور Flexbox وGrid.
• تسبب float أحيانًا مشاكل في التصميم، لذا يفضل استخدامها بحذر أو التبديل إلى طرق أحدث.
• دايمًا استخدم clearfix عند استخدام float داخل حاوية.