شـرح خاصـيه الـ Float بالتفصـيل فـ CSS

خاصيه الفلوت تعنى العوم بمعنى انك اذا اعطيب العنصر خاصيه الفـلوت .. فإنـه يعوم داخل الصفحه

وللخـاصيه ثلاث قيم :

الاولى : Right اى العنصر يتدفق او يعوم ناحيه اليمين من الصفحه والعناصر التاليه له تتاثر ايضا بهذا التدفق

الثانيه : Left اى العنصر يتدفق او يعوم ناحيه اليسـار من الصفحه والعناصر التاليه له تتاثر ايضا بهذا التدفق

الثالثه : none اى لا تاثير للتدفق

أمثــله كثــيره حتى تتضح الفكرة تماامااا :

فجواب هذا السـؤال فى خاصيـه الفـلوت

سوف تفهم ما اقصد من خلال هذا المثال

والان نتطرق للمشاكل الموجوده بهذه الخاصيه وحلولها :

1) المشكله الاول هى مشكله المحتوى بمعنى عند وضع عنصرين داخل عنصر يشملهم وهو الاب

واذا كان كلا من العنصرين اعطينا لاحدهما خاصيه الفلوت لجهه اليسار والاخر لجهه اليمين

فعندئذا لا يتأثروا بالاب ... شاهد هذا المثال لتفهم ما اقصد

حل هذا المشكله بثلاث طرق

الاول : ان تعطى للعنصر الاب overflow :hidden

حينها يستطيع ان يشمل الابناء المعطى لهم خاصيه ال float

الثانى : باستخدام خاصيه الـ clear . والتى تعنى ان تمسح تاثير الفلوت

ونقوم بعمل div فااصل بعد العناصر المعطى لها الخاصيه التعويم

ونعطيه هذا الخاصيه وندرج له القيمه both بمعنى ان يمسج تاثير التعويم من جهه اليمين واليسار

الثالث والاخير : بان نستخدم العناصر الوهميه وهى after و before

بمعنى سوف نعطى الاب خاصيه ال after ونعطى clear بحيث اننا نقول

ان يمسح تاثير الفلوت بعده ... وبهذا يشمل جميع الابناء

شاهد المثال

وبهذا نكون قد انتهيا من شرح الدرس كاملا مفصلا بالمشاكل والحلول

اتمنى ان اكون قد افدتكم وجزاكم الله خيرا والسلام عليكم ورحمه الله

التعليقات