خاصيه الفلوت تعنى العوم بمعنى انك اذا اعطيب العنصر خاصيه الفـلوت .. فإنـه يعوم داخل الصفحه
وللخـاصيه ثلاث قيم :
الاولى : Right اى العنصر يتدفق او يعوم ناحيه اليمين من الصفحه والعناصر التاليه له تتاثر ايضا بهذا التدفق
الثانيه : Left اى العنصر يتدفق او يعوم ناحيه اليسـار من الصفحه والعناصر التاليه له تتاثر ايضا بهذا التدفق
الثالثه : none اى لا تاثير للتدفق
أمثــله كثــيره حتى تتضح الفكرة تماامااا :
- إذا كنـت تريد عمل صـورة ويلتف الكلام حول الصورة ؟
فجواب هذا السـؤال فى خاصيـه الفـلوت
سوف تفهم ما اقصد من خلال هذا المثال
http://codepen.io/anon/pen/...والان نتطرق للمشاكل الموجوده بهذه الخاصيه وحلولها :
1) المشكله الاول هى مشكله المحتوى بمعنى عند وضع عنصرين داخل عنصر يشملهم وهو الاب
واذا كان كلا من العنصرين اعطينا لاحدهما خاصيه الفلوت لجهه اليسار والاخر لجهه اليمين
فعندئذا لا يتأثروا بالاب ... شاهد هذا المثال لتفهم ما اقصد
http://codepen.io/anon/pen/...حل هذا المشكله بثلاث طرق
الاول : ان تعطى للعنصر الاب overflow :hidden
حينها يستطيع ان يشمل الابناء المعطى لهم خاصيه ال float
http://codepen.io/anon/pen/...الثانى : باستخدام خاصيه الـ clear . والتى تعنى ان تمسح تاثير الفلوت
ونقوم بعمل div فااصل بعد العناصر المعطى لها الخاصيه التعويم
ونعطيه هذا الخاصيه وندرج له القيمه both بمعنى ان يمسج تاثير التعويم من جهه اليمين واليسار
http://codepen.io/anon/pen/...الثالث والاخير : بان نستخدم العناصر الوهميه وهى after و before
بمعنى سوف نعطى الاب خاصيه ال after ونعطى clear بحيث اننا نقول
ان يمسح تاثير الفلوت بعده ... وبهذا يشمل جميع الابناء
شاهد المثال
http://codepen.io/anon/pen/...وبهذا نكون قد انتهيا من شرح الدرس كاملا مفصلا بالمشاكل والحلول
اتمنى ان اكون قد افدتكم وجزاكم الله خيرا والسلام عليكم ورحمه الله