منتدى استراحات زايد - ما رآيك في العوم في صفحات الويب ؟ شرح شآمل لخآصية float في Css !

<div><div align="center">في درس سابق من دروس التخطيط ذكرت أن Position من أهم الخصائص في css بل وأهمها على الإطلاق، لكني في هذا الدرس أقول لكم أن هناك خصائص اخري مهمه :) فحدينا اليوم عن خاصية مثيرة للجدل! فهناك من يطالب بالإستغناء عنها كلياً، وهناك من ينصح بالإبتعاد عنها تماماً عند تخطيط الموقع Layout أو استخدمها في أضيق الحدود لأنها السبب الأول في عدم توافق المواقع على المتصفحات المختلفة بسبب ما تحدثه من فوضى! ولكن مع ذلك لا يكاد يخلو أي موقع منها فهي موجودة في القوائم والصناديق الجانبية وداخل الصور والأيقونات المختلفة…الخ، بل ويمكن أن تشاهدها أيضا عند تصفحك الصُحف الورقية! لذا أنصحكم قبل القراءة بأخذ نَفَس طويل >..

float تعني الطفو أو التعويم!
وهو تحويل أو إعادة تعريف العناصر الثابتة وإزاحتها لجهة اليمن أو اليسار خروجاً عن تدفق الصفحة الطبيعي، وتبعاً لذلك يُحدد الجانب الذي سوف تتدفق ناحيته العناصر الأخرى حول هذا العنصر -العائم-.

http://lh5.ggpht.com/_c4C63JMfp6g/S6...t-property.gif

هذا المفهوم هو مشابه تماماً لما تراه في صفحات المجلات حيث تجد الصور والرسومات وقد إنحازت لجهه معينه ومن حولها تنساب النصوص في الجهه الأخرى، وهو ما يطلق عليه ’التفاف النص‘
تصور مثلاً مع الفارق أن أمامك مغناطيس وضع وسط مجموعة من برداة الحديد فكلما ذهبت بجسم المغناطيس لجهه معينة إنسابت من حولة برادة الحديد، أي أن التعويم يمكن أن نصفه بإنه لتحديد الجانب الذي سوف تتدفق ناحيتة المحتويات.. كما أن العنصر العائم نفسه محكوم بالعنصر الأب الحاوي له هو فقط ولا يخرج عنه.

يمكننا استخدام float على كل أوسمة html فقرات
، صناديق <div>، قوائم <ul>,، صور أي شيء فيما عدا الوسم الجذر ، وطريقة التطبيق واحدة وتكتب على هذا النحو مع وجود 3 قيم للخاصية كما موضح بالجدول:

رمز Code:
#content {
float: right;
}
float:right تعويم العناصر إلى اليمين مع تدفق المحتويات جهة اليسار، يسار العنصر.
float:left تعويم العناصر إلى اليسار مع تدفق المحتويات جهة اليمين، يمين العنصر.
float:none إزالة أي تعويم للعناصر وهو الوضع الإفتراضي، وعادة يستخدم في حالة تجاوز أي تعويم موروث يطبق على عدة عناصر.

نبدأ العوم أولاً مع الصور
ويقال أنها الوظيفة الأساسية والأصلية التى وجدت من أجلها خاصية التعويم، محاذاه الصور حتى تلتف النصوص حولها في شكل جميل.

رمز Code:

#content {
border: 4px solid #00F;
background: #FFF;
width:400px;
}
#content img {
border: 4px solid #0F0;
}

http://vb.ma7room.com/img.gif
محتويات، نصوص، نصوص، نصوص....

في الكود السابق html نجد صندوق بإسم content إطار للمحتويات و في داخله صورة و فقرة لإختبار خاصية التعويم، وفي css وضعنا بعض الخصائص للتوضح كخلفية للصندوق مع حدود وتحديد عرض كما تم وضع حدود للصورة، ثم بعد وضع محتوى تجريبي نشاهد النتيجة داخل المتصفح:

http://lh4.ggpht.com/_c4C63JMfp6g/TR...property02.gif

الأن سنضع float على الصورة ثم نرى النتيجه:

رمز Code:

#content {
border: 4px solid #00F;
background: #FFF;
width:400px;
}
#content img {
border: 4px solid #0F0;
float: right;
}

http://vb.ma7room.com/img.gif
محتويات، نصوص، نصوص، نصوص....

http://lh4.ggpht.com/_c4C63JMfp6g/TR...property03.gif

أها الأن تغير التدفق الطبيعي للصفحة وظهرت الصورة في جهة اليمين وكأنها جزء من الفقرة، في حين أن النص قفز للأعلى وبطبيعة الحال لا توجد أي مسافات فاصلة بينهم فالمساحة الفارغة أسفل الصورة هي طبيعية نتيجة للفرغات بين الأسطر حيث أنها تتغير على حسب حجم الخط ونوعة و هل تستخدم خاصية التباعد بين الأسطر line-height أو لا.

http://lh3.ggpht.com/_c4C63JMfp6g/TR...property04.gif

فس الحال بعد عكس إتجاه التعويم لجهة اليسار ، حيث أن اتجاه العنصر العائم لا يتأثر باتجاه الصفحة و العنصر العائم نفسه -وبما أنه عائم- فهو يطفو ويظهر أعلى جميع العناصر من بعده! يعنى مثلاً في حالة وضعك حدود للفقرة
أو خلفية فإن الصورة سوف تظهر أعلى تلك التأثيرات مثال:

رمز Code:

#content {
border: 4px solid #00F;
background: #FFF;
width:400px;
}
#content img {
border: 4px solid #0F0;
float: right;
}
#content p {
border: 4px solid #F00;
background:#EEE;
}

http://vb.ma7room.com/img.gif
محتويات، نصوص، نصوص، نصوص....

http://lh6.ggpht.com/_c4C63JMfp6g/TR...property05.gif

لم تظهر حدود الفقرة بل طفت الصورة عليه وكذلك في حالة وجود خلفية كانت نقش أو صورة.

تذكير: العناصر العائمة تطفو على مستوى الكتلة!
نستخلص من هذا وهو ما سيشترك لاحقاً في جميع الحالات القادمة أن العناصر العائمة تطفو على مستوى الكتلة، لتسلك سلوك العناصر المضمنة أو السرد Inline elements وما يليه من محتويات سيتدفق حوله، ومن هنا جاءت التسميه.

مشاكل تعويم الصور
أكثر المشاكل شيوعاً هي التى تتعلق بالمحتويات القليلة والتى بدورها تقلص العنصر الحاوي لها، فكما ذكرنا قبل قليل أن العناصر العائمة تطفو على مستوى الكتله إذن فصندوق المحتويات content يتجاهل العنصر العائم وبالتالي يظهر أن هناك حشو ناقص لعدم وجود محتويات تملأ ذلك الفراغ كما يزداد الأمر سوء لو تكرر صندوق المحتويات حيث تتداخل الصور!

http://lh3.ggpht.com/_c4C63JMfp6g/TR...property06.gif

تعويم الكتل والعناصر
وأقصد هنا تخطيط الموقع Layout حيث يتم توزيع عمود المحتويات والقوائم الجانبية ولنأخذ مثال على مُخطط موقع يشمل صندوقين فقط واحد للمحتويات والآخر لقائمة جانبية كما بالكود التالي:

رمز Code:

#content {float:right; width:220px; background: #FC9;}
#sidebar {float:left; width:100px; background: #F33;}

http://lh5.ggpht.com/_c4C63JMfp6g/TR...property07.gif

وهنا أضفت float فقط على كل من content و sidebar ليظهروا بعد ذلك على المتصفح وقد انحازت كل منها في جهة حسب قيمة float وبس! هذا كل ما يمكن أن يقال في تعويم الصناديق.

مشاكل تعويم الكتل والعناصر
ليس الأمر بهذا البساطة كما ظهر في المثال السابق فمشاكل التعويم تظهر كلما أضفت عناصر أخرى الى التخطيط فالموقع يحتوي على نهاية footer ورأس header وربما عمود ثالث ورابع بالإضافة الى الصندوق الحاوي لكل هذا وهنا تظهر المشاكل مع المثال التالي وأولها بعد إضافة إطار بالمعرّف main مع بعض الخصائص مثل خلفيه و حدود حينها تكتشف المشكلة:

رمز Code:

#content {float:right; width:220px; background: #FC9;}
#sidebar {float:left; width:100px; background: #F33;}

#main {
border: 4px solid #0C0;
background:#FFF;
padding:10px;

}

http://lh4.ggpht.com/_c4C63JMfp6g/TR...property08.gif

نفس ما حدث مع تعويم الصور فالعناصر العائمة تطفو على مستوى الكتله وبالتالي العناصر الأخرى تتجاهل ذلك التعويم ويظهر حشو غير مكتمل! حيث أن من المفترض ان يتوسع الإطار الحاوي حتى يشمل كل ما بداخله من عناصر.

كما أن هناك مشكلة أخرى وهي عند إضافة أي عنصر أسفل العناصر التى تم تعويمها مثل نهاية الصفحة footer أو أي شيء آخر:

رمز Code:

#content {float:right; width:220px; background: #FC9;}
#sidebar {float:left; width:100px; background: #F33;}

#main {
border: 4px solid #0C0;
background:#FFF;
padding:10px;
}

#footer { background: #222; padding: 2px; }

footer

هنا المشكلة ظهرت مركبة فالصندوق تجاهل التعويم وارتفع الى منطقة الحشو الفارغة، أما النص فقد انساب الى أقرب مساحة فارغة حول العنصر العائم، وفي حاله النصوص الطويلة سوف يستمر الصندوق في الهبوط وفقاً لتدفق الصفحة الطبيعي

http://lh4.ggpht.com/_c4C63JMfp6g/TR...property10.gif

تعويم القوائم وأشكالها المختلفة
لا جديد عما سبق ولكن مايهمني في تعويم القوائم هو الإتجاه فعند تعويم البنود li لليمين أو اليسار تبدأ الإزاحة من أول بند الى أسفل:

رمز Code:

li { float:right; background: #F33; }
li.first { background: #C33; }

1

2

3

4

5

http://lh6.ggpht.com/_c4C63JMfp6g/TR...property12.gif

أول بند هو الأول أيضا جهة اليمين، كما يمكنك أن تجعل بعض البنود تخرج عن ذلك الترتيب بإزحتها في الإتجاه العكسي:
رمز Code:

li { float:right; background: #F33; }
li.first { background: #C33; float:left; }

li.fourth { float:left; }

1

2

3

4

5

الخاصية clear
لا لم أخرج عن موضوع الدرس حول الخاصية float ولكن الحديث عن التعويم لا يخلو من ذكر خاصية هامة جداً لا يمكن أغفالها وهي الخاصية clear يعني تنظيف أو توضيح ووظيفتها إزالة أي تعويم أو بمعنى أخر التحكم في وضع العناصر اللاحقة لأي عنصر تم تعويمه، حيث أنه في الوضع الطبيعي تتحرك العناصر اللاحقة حول العنصر العائم أو لأقرب مساحة فارغة كما ذكرنا، لكن حينها نضع clear ستظهر تلك العناصر مباشرة أسفل العنصر العائم وتشمل الخاصية على 4 قيم مختلفة:

clear: right أزله التعويم جهة اليمن.
clear: left أزله التعويم جهة اليسار.
clear: both أزله التعويم في الإتجاهين.
clear: none لا شيء وهو الوضع الأفتراضي، وعداة يستخدم في أزاله الخصائص الموروثة.

http://lh6.ggpht.com/_c4C63JMfp6g/TR...property14.gif

حلول مشاكل التعويم
طرق الحل المختلفة الهدف منها هو جعل العناصر اللاحقة للعنصر العائم تتخذ سلوك عناصر الكتله ولا تلتلف حوله كما في حاله إضافة footer، أو جعل الصناديق الحاويةالتى تتضمن عناصر تم تعويمها أن لا تتجاهل ذلك التعويم ويتم استيعابه، وتنقسم إلى:

الحل الأول إضافة وسم فارغ أسفل العناصر العائمة وهو حل قديم لكن مازال مستخدم بكثرة، حيث يفصل ذلك الوسم بين العناصر العائمة وما تحته:

رمز Code:

الحل الثاني: إضافة Pseudo-elements :after وهي العناصر المزيفة أو الإفتراضية وتستخدم لإدراج محتويات بعد انتهاء محتوى العنصر! وهذا يعني عدم الحاجه الى إضافة أوسمة html زائدة كما في الحاله الأولى، وسوف نطبقها على فئه إضافية خاصة ولتكن بإسم ’clearfix‘ على هذا النحو:

رمز Code:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
اقرأ المزيد عن تلك الطريقة كما أن المتصفحات القديمة يلزمها إضافة خصائص أخرى لتعمل بشكل صحيح:

رمز Code:
.clearfix {
display:inline-block;
}
* html .clearfix {
display:block;
zoom:1;
}
المحتوى الذى تم إدراجه صغير جداً يكاد لا يرى كما تم إضافة خصائص أخرى الغرض منها إخفائه تماماً وطريقة العمل هي بإضافة تلك الفئة المسماه clearfix الى أي صندوق ’وعاء للمحتويات‘ يوجد بداخله عناصر تم تعويمها هكذا:

رمز Code:

الحل الثالث وهو التجاوز وذلك بالإعتماد على الخاصية Overflow بالقيمة outo أو hidden وفيها يتوسع وعاء المحتويات كي يشمل جميع العناصر الطافية داخله، وتضاف تلك الخاصية ضمن خصائص صندوق ’وعاء للمحتويات‘ الذى يوجد بداخله عناصر تم تعويمها مثلاً:
رمز Code:
#main {
border: 4px solid #0C0;
background:#FFF;
padding:10px;
overflow:hidden;
}
ويعتبر من أسهل الحلول ومناسب في أغلب الحالات حيث أنه لا يتطلب إضافة أوسمة إضافيه كما انه صالح لجميع المتصفحات، المشكلة الوحيد تظهر في حالة وجود محتويات خارجة عن حدود صندوق المحتويات كصورة كبيرة مثلاً تخطت العرض المحدد ففي هذه الحاله سوف تختفي أو يظهر شريط تمرير يشوه التصميم.

الحل الرابع وهو تعويم صندوق المحتويات نفسه ولكن هذه الطريقة غير مناسبه إلا في حالات معينه ولا تناسب كافة التصمميات، حيث أنه بإزاحتك لصندوق المحتويات سوف يؤثر بدورة على العناصر اللاحقه له.