لقد كنت مثلكم تماماً , أعاني من فهم الـ float ,

لقد بعد التعمق وجدت إنه سهل جداً

سأعطيكم مثال علي أرض الواقع , حسناً

لو كان لديك منزل وقمت ببناء حولة سد ,

وحدث فيضان , ماذا سوف يحدث ؟!

لن يدخل الماء إلي المنزل بالتأكيد بسبب السد ,

ولكن ماذا يحدث إذا قمت بإزالة السد ؟!!

بالتأكيد سوف يدخل الماء ويجعل المنزل يطفو فوق الماء ,

هكذا الـ float

العنصر العادي يكون كالمنزل الذي يحيطة السدود , ولكن بمجرد إعطاءة الـ float, سيقوم بإزالة السد

كأنك لديك مساحة من الأرض ,

أنت تمتلك أسوار , وجارك الذي علي الجهة اليمني لا يمتلك ,

فماذا سوف يحدث إذا قمت بنقل منزلك إلي الجهة اليمني ؟!

لن يكون هناك أسوار تحيط منزل بالتاكيد !!

فهكذا تعمل الـ float

أنت تقوم بتحديد float للعنصر وتجعل العناصر تطفو ,

مثال ,

لو كان لدي عنصر علي الجهةة اليسري من الصفحة , وقمت بنقلة إلي اليمني بإعطاءة float: right,

سيقوم العنصر بإزالة السد الذي به بسبب إعطاءة float , أي أنك جعلت العنصر يطفو , ولذلك العناصر الذي تحت العنصر مباشرة , سوف ترتفع كالمياة بجانب العنصر

حسناً لقد فهمنا هذه النقطة , ماذا إذا كنت إريد ببناء سد مره أخري لكي أحافظ علي العنصر من دخول المياة فية ؟!

سوف أخبرك , إذا أردت أن تقوم بمنع العناصر الذي أسفل العنصر الذي تم إعطاءة float من الصعود بجانبة

ستقوم بإعطاءة

clear: right / left / both

حسب ما تريد

كإنك تقول , قم ببناء سد من الناحية اليمني أو اليسري أو من كلا الجانبين

وفي هذه الحالة , ستقوم بجعل العنصر ينتقل من جهةة إلي أخري بدون تأثير العناصر الذي تحتة فيه

وهذا المثال يوضح شرحي

https://codepen.io/GawiSh/pen/ryPYXo

المثال الأول , بدون float

المثال الثاني , مع float

المثال الثالث , مع float with clear