الاثنين، 1 أغسطس 2016

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

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

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

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

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

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

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

  • إذا كنـت تريد عمل صـورة ويلتف الكلام حول الصورة ؟

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

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

http://ift.tt/2atv7hV

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

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

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

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

http://ift.tt/2aFHESz

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

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

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

http://ift.tt/2atuBR8

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

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

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

http://ift.tt/2aFHHhl

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

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

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

شاهد المثال

http://ift.tt/2atvb15

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

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



from حسوب I/O - الأكثر شيوعاً http://ift.tt/2aFIDlI

ليست هناك تعليقات:

إرسال تعليق

دائماً، رأيكم يهمنا،