لقد كنت مثلكم تماماً , أعاني من فهم الـ float ,
لقد بعد التعمق وجدت إنه سهل جداً
سأعطيكم مثال علي أرض الواقع , حسناً
لو كان لديك منزل وقمت ببناء حولة سد ,
وحدث فيضان , ماذا سوف يحدث ؟!
لن يدخل الماء إلي المنزل بالتأكيد بسبب السد ,
ولكن ماذا يحدث إذا قمت بإزالة السد ؟!!
بالتأكيد سوف يدخل الماء ويجعل المنزل يطفو فوق الماء ,
هكذا الـ float
العنصر العادي يكون كالمنزل الذي يحيطة السدود , ولكن بمجرد إعطاءة الـ float, سيقوم بإزالة السد
كأنك لديك مساحة من الأرض ,
أنت تمتلك أسوار , وجارك الذي علي الجهة اليمني لا يمتلك ,
فماذا سوف يحدث إذا قمت بنقل منزلك إلي الجهة اليمني ؟!
لن يكون هناك أسوار تحيط منزل بالتاكيد !!
فهكذا تعمل الـ float
أنت تقوم بتحديد float للعنصر وتجعل العناصر تطفو ,
مثال ,
لو كان لدي عنصر علي الجهةة اليسري من الصفحة , وقمت بنقلة إلي اليمني بإعطاءة float: right,
سيقوم العنصر بإزالة السد الذي به بسبب إعطاءة float , أي أنك جعلت العنصر يطفو , ولذلك العناصر الذي تحت العنصر مباشرة , سوف ترتفع كالمياة بجانب العنصر
حسناً لقد فهمنا هذه النقطة , ماذا إذا كنت إريد ببناء سد مره أخري لكي أحافظ علي العنصر من دخول المياة فية ؟!
سوف أخبرك , إذا أردت أن تقوم بمنع العناصر الذي أسفل العنصر الذي تم إعطاءة float من الصعود بجانبة
ستقوم بإعطاءة
clear: right / left / both
حسب ما تريد
كإنك تقول , قم ببناء سد من الناحية اليمني أو اليسري أو من كلا الجانبين
وفي هذه الحالة , ستقوم بجعل العنصر ينتقل من جهةة إلي أخري بدون تأثير العناصر الذي تحتة فيه
وهذا المثال يوضح شرحي
المثال الأول , بدون float
المثال الثاني , مع float
المثال الثالث , مع float with clear
التعليقات