البحث في الموقع

في هذا الدّرس من سلسلة تعلّم CSS، سنشرح بعض طرق تغيير طريقة رصف العناصر في المستند، ونتدرّب على ذلك. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. رصف العناصر (Layout) في CSS. (هذا الدرس) الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. رصف العناصر (Layout) بالإمكان استخدام CSS لتحديد التأثيرات المرئية المتنوعة الّتي قد تؤثر على ارتصاف العناصر في المستند، بعض هذه التقنيّات متقدّمة المستوى، وهي خارجة عن موضوع هذه السّلسلة. عندما ترغب برصف العناصر في المستند بطريقة متشابهة في جميع المتصفّحات، فإنّ ورقة الأنماط تتفاعل بطرقٍ قد تكون شديدة التّعقيد مع الأنماط المبدئيّة في المتصفّح ومحرّك رصف العناصر، وهذا أيضًا موضوع متقدّم لن نتطرّق له. سنقصر اهتمامنا على تقنيّات بسيطة يمكنك البدء بها. هيكل المستند إن أردت التحكّم بتخطيط المستند، فقد تحتاج إلى تغيير هيكله. ربّما تحوي لغة الرّماز الّتي تستخدمها وسومًا عامّة الأغراض تساعد في الوصول إلى بنية معيّنة، وفي HTML يمكن اللّجوء إلى الوسم <div> لهذا الغرض. مثال في مستندك الّذي تتدرّب عليه، لم يكن للفقرات المُرقّمة تحت العنوان الثّاني عنصر مستقلّ يحويها، ولذلك لم يكن بالإمكان إحاطتها بحدود مستقلّة، فلا يوجد عنصر يمكن استهدافه بمحدّد يحقّق هذه النّتيجة. ولحلّ هذه المشكلة، يمكن إضافة وسم <div> يحيط بالفقرات جميعها، ويكون هذا الوسم فريدًا بمعرّف id: <h3>Numbered paragraphs</h3> <div id="numbered"> <p>Lorem ipsum</p> <p>Dolor sit</p> <p>Amet consectetuer</p> <p>Magna aliquam</p> <p>Autem veleum</p> </div> يمكن الآن كتابة قاعدة تخلق حدودًا حول الفقرات والقائمة: ul, #numbered { border: 1em solid #69b; padding-right:1em; } هكذا تبدو النّتيجة: وحدات القياس استخدمنا وحدة البكسل (px) للقياسات في الدّروس السّابقة، وهي ملائمة لبعض الأغراض كشاشات العرض، ولكنّها قد تعطي نتيجة غير مرغوبة عندما يُغيّر المستخدم الخطّ في المتصفح. قد يكون من الأنسب في حالات عديدة استخدام وحدة مبنيّة على النّسب المئويّة أو em (قياس الخطّ الحالي، أو عرض حرف m في هذا الخطّ بصورة أدقّ)، عندما يغيّر المستخدم حجم الخط، فإنّ تخطيط الصّفحة يتغيّر تلقائيًّا. مثال الحدّ على الجانب الأيسر لهذا النّصّ مُعيّن بالبكسل. الخدّ على الجانب الأيمن مُعيّن بوحدة em. غيّر حجم الخطّ في المتصفّح لديك وشاهد كيف يتغيّر الحدّ الأيمن بينما يبقى الأيسر كما هو: كبّرني! تفاصيل أكثر هناك وحدات أخرى مناسبة للأجهزة المختلفة، سنطّلع على معلومات أكثر في الدّروس القادمة. رصف النصوص هناك خاصّيتان تؤثّران في كيفيّة رصف المحتوى النّصّيّ للعناصر: ‏text-align: ترصف محتوى العنصر، وتقبل إحدى القيم التّالية: left, right, center, justify. ‏text-indent: تدفع السّطر الأوّل من الفقرة بالمقدار المُحدّد. هذه الخواصّ تنطبق على أي محتوى مشابه للنّصوص في العناصر، وليس على النّصوص فقط. تذكّر أنّ القيم المُسندة لهذه الخواص يرثها الأبناء، ولذا قد تحتاج إلى إزالتها من الأبناء لتجنّب نتيجة غير مرغوبة. مثال رصف العناوين في المنتصف: h3 { border-top: 1px solid gray; text-align: center; } وهذه هي النّتيجة: لاحظ أنّ المحتوى المصنّف تحت عنوان ما في HTML لا يقع ضمن العنوان ذاته في بنية المستند، ممّا يعني أن تنصيف العناوين لن يؤدّي إلى تنصيف الفقرات المُدرجة تحت هذه العناوين بشكل مبدئيّ، لأنّها لا ترثها. طفو العناصر (Float) تجبر الخاصّة float العنصر على أن "يطفوَ" إلى اليمين أو إلى اليسار، وهذه طريقة بسيطة للتحكّم بالموضع والحجم. تنساب بقيّة المحتويات في المستند بصورة طبيعيّة حول العنصر الطافي، ويمكن التّحكّم بهذا الانسياب الخاصّة clear على العناصر الأخرى لإبعادها عن العناصر الطّافية. مثال في المستند الّذي تتدرّب عليه، تمتدّ القوائم على كامل عرض النّافذة (وإن كانت نصوص العناصر أقصر من عرضها)، يمكن منع ذلك بجعلها تطفو إلى اليسار. لإبقاء العناوين في مواضعها، يجب أيضًا تحديد الخاصّة clear عليها: ul, #numbered {float: left;} h3 {clear: left;} لتبدو النّتيجة هكذا: (يتطلّب الأمر بعض الحشوة على يمين الصّناديق، لأنّهما الحدود قريبة جدًّا من النّصّ) تحديد مواضع العناصر (Positioning) يمكن تعيين موضع العنصر بإحدى أربع طرق باستخدام الخاصّة position وقيمة من القيم التّالية (تعتبر هذه القيم متقدّمة المستوى، يمكن استخدامها بأساليب بسيطة نسبيًّا، ولهذا أوردناها هنا، ولكنّ استخدامها بطرق معقّدة أمر يتطلّب شيئًا من الخبرة): ‏relative: يُزاح العنصر إلى موضع جديدٍ بالنّسبة لموضع الطّبيعيّ، أي يمكن استخدام هذه الخاصّة لإزاحة العنصر بمقدار معيّن، ويمكن أيضًا استخدام حوافّ العنصر لتحقيق نتيجة مشابهة. ‏fixed: موضع العنصر ثابت، أي بالنّسبة لنافذة المستند، فحتّى عندما يمرّر المستخدم الصّفحة إلى أسفل أو إلى أعلى، يبقى العنصر ثابتًا بالنّسبة للنافذة. ‏absolute: موضع العنصر ثابت بالنسبة لعنصر أبٍ، يُشترط أن يكون العنصر الأب ذا موضع relative أو fixed أو absolute، ويمكن جعل موضع الأب relative بمقدار إزاحة مساوٍ للصفر إذا أردنا استخدام هذه الخاصّة على الابن دون إزاحة الأب. ‏static: القيمة المبدئيّة، استخدمها عند الحاجة للنصّ صراحة على تصفير الموضع. بعد تعيين هذه الخاصّة، استخدم إحدى الخواص التّالية لتعيين إزاحة العنصر (وحجمه): top و right و bottom و left و width و height. مثال لتعيين موضع عنصرين أحدهما فوق الآخر، أنشئ عنصرًا يحويهما في المستند: <div id="parent-div"> <p id="forward">/</p> <p id="back">\</p> </div> ثمّ اجعل موضع الأب relative دون إزاحة، واجعل الابنين absolute: #parent-div { position: relative; font: bold 200% sans-serif; } #forward, #back { position: absolute; margin:0px; /* no margin around the elements */ top: 0px; /* distance from top */ left: 0px; /* distance from left */ } #forward { color: blue; } #back { color: red; } هكذا تبدو النّتيجة: تفاصيل أكثر ضبط مواضع العناصر أمرٌ معقّد. إن كنت تصمّم ورقة أنماط لتعمل في عدّة متصفّحات، فعليك أيضًا أن تأخذ في الحٌسبان الاختلافات في كيفيّة تفسير المتصفّحات للمعيار القياسيّ، وربّما العلل المختلفة في إصدارات كلّ متصفّح. تمرين: رصف العناصر عدّل المستند doc2.html وورقة الأنماط style2.css باستخدام أمثلة من فقرتي "هيكل المستند" و"طفو العناصر" السابق ذكرهما. في مثال طفو العناصر، أضفّ بعض الحشوة لفصل النّصّ عن الحدود بمقدار 0.5em. تمرين عدّل المستند doc2.html مُضيفًا الوسم التّالي قرب نهايته، قبل ‎</body>‎: <img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> إن لم تحفظ الصّورة التّالية من قبل لديك، فاحفظها الآن في المجلّد الّذي يحوي المستند السّابق: تأكّد من أن الصّورة تظهر في موضعها المُتوقّع بتحديث الصّفحة في المتصفّح. أضف قاعدة لورقة أنماطك تجعل الصّورة في الزاوية العلويّة اليُمنى لمستندك. حدّث الصّفحة في المُتصفّح واجعل نافذته صغيرة، تحقّق من كون الصّورة تبقى في الزّاوية العلويّة اليمنى حتّى عند تمرير الصّفحة للأسفل: (A) The oceans Arctic Atlantic Pacific Indian Southern (B) Numbered paragraphs 1: Lorem ipsum 2: Dolor sit 3: Amet consectetuer 4: Magna aliquam 5: Autem veleum شاهد الحل التّمرين الأوّل تظهر الصّورة في يمين القائمة الثّانية. التّمرين الثاني القاعدة التّالية تُحقّق النّتيجة المطلوبة: #fixed-pin { position:fixed; top: 3px; right: 3px; } ما التالي؟ لقد غطّينا معظم المواضيع الأساسيّة في CSS حتى هذا الدّرس، سنشرح في الدّرس المُقبل المُحدّدات المتقدّمة في قواعد CSS، وبعض التنسيقات الخاصّة بالجداول. ترجمة بتصرّف للدرس Layout من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

تُعتبر خاصيّة الطوفان float property من مصادر القوّة لأي مطوّر أو مُصمّم يستخدم تِقنيّات HTML وCSS. ويُؤدّي عدم الفهم الصحيح لآلية عمل هذه الخاصيّة إلى بعض التِباس في كيفية التعامُل معها. ارتبطت هذه الخاصيّة في الماضي مع أخطاء المُتصفّحات ومشاكل التوافقية، أما الآن فالتعامُل مع خاصيّة الطوفان أصبح من الأمور الأساسيّة التي لا يستطيع المُطوّر تجاهلها. سنتناولُ الموضوع بجزئيّاته الصغيرة لفهم ما تُقدمه هذه الخاصيّة واستخدامها بالشكل الأمثل. عرفنا الطوفان سابقًا من عالم الطباعة والتصميم كما في المجلات، حيثُ الصورة على أحد الجهتين اليمين أو اليسار ويتوضع نَصّ بجانبها بشكل مُتناسق وجذّاب، وفي عالم الويب ومع تقنيّات HTML/CSS، يلتف النصّ حول الصورة باستخدام خاصيّة الطوفان float property كما هو الأمر في تصاميم المجلات. استخدام الصُور مع خاصيّة الطوفان هو أحد الأمور الّتي يُمكنك استخدامها مع هذه الخاصيّة، ولكن في الحقيقة يُمكن استخدام هذه الخاصيّة أيضًا مع أي عنصر من عناصر HTML، حتّى أنّه بالإمكان استخدامها في تقسيم الصفحة page layout. التعريفتُعرّف رابطة الشبكة العالمية W3C خاصيّة الطوفان بالشكل التالي: يُمكن تحديد أربعة قيم لخاصيّة الطوفان: left, right, inherit, none، حيثُ كل قيمة تُعبّر عن دلالتها فمثلًا، تحديد قيمة الطوفان إلى اليسار لعنصر ما (float: left) سينقل العنصر إلى أقصى حافة العنصر الأب الخاص به من جهة اليسار. كما هو الحال عندما تكون القيمة المُحددة للعنصر هي float: right، حيثُ أنّ العنصر سينتقل إلى أقصى اليمين لحواف العنصر الأب الخاص به، وتجعل القيمة inherit العنصر يرثُ قيمة الطوفان من العنصر الأب الخاص به، والقيمة none هي القيمة الافتراضيّة والتي تجعل من العنصر لا يستخدم الطوفان أبدًا. img { float: right; margin: 10px; } آلية عمل الطوفانيعمل الطوفان بطريقة غير مُعقدة وليس كما يعتقد البعض، لتوضيح ذلك يجب العودة إلى أساسيات HTML لمعرفة حقيقة ما يجري قبل الخوض في التفاصيل. في عالم الويب، تتقيّد تقنية HTML بجملة قواعد، ما يتقاطع مع خاصيّة الطوفان هو قاعدة التدفّق الطبيعيّ normal flow، حيثُ تصطف العناصر مِن نوع block فوق بعضها البعض، كما في العناصر div، p، h1 من الأعلى إلى الأسفل. تتوضع العناصر المُطوفة في بادئ الأمر حسب التدفّق الطبيعيّ وتبعًا إلى تسلسلها في مُستند HTML، ومن ثُمّ تُسحب العناصر المُطوفة من التدفّق الطبيعيّ، وتُنقل إلى أقصى يمين أو يسار (على حسب القيمة المُحددة) العنصر الأب الخاصّ بالعنصر المُطوف. بمعنى آخر، تغيّر العناصر المُطوفة من طريقة عملها وتُخالف التدفّق الطبيعيّ في اصطفاف العناصر بعضها فوق بعض إلى اصطفاف العناصر بجانب بعضها البعض، وذلك في حال توفر مساحة كافية للعناصر للتتوضع بجانب بعضها البعض. فَهم هذا التسلسل في عرض العناصر هو أهمّ ما في الطوفان، وهو ما يجعل البعض مرتبكًا في تطبيق هذه الخاصيّة وحلّ مشاكلها. في المثال التالي يوجد ثلاثة صناديق مُحددة الطول والارتفاع، ومن دون تطبيق خاصيّة الطوفان وتُعرض وفقًا لتسلسلها في مُستند HTML. <div class="block pink"></div> <div class="block blue"></div> <div class="block green"></div>.block { width: 200px; height: 200px; }من المُلاحظ في المثال السابق كيف أنّ العناصر تصطف فوق بعضها البعض، ويُمثل ذلك مفهوم "التدفق الطبيعيّ". في المثال التالي نفس الصناديق ولكنها مُطوّفة باستخدام خاصيّة الطوفان float: left. .block { float: left; width: 200px; height: 200px; }تصطفُ الصناديق في المثال السابق بجانب بعضها البعض، وهو أمرٌ مُتوقع بعد معرفة عمل خاصيّة الطوفان، ويتم ذلك فقط لوجود مساحة كافية للعناصر للتتوضع بجانب بعضها البعض. لتوضيح الجزئيّة السابقة تَمّ التعديل على المثال السابق بزيادة عدد الصناديق، مع الانتباه أنّ العنصر الأب لهذه الصناديق هو جِذْعُ الصفحة . من المُلاحظ كيف أنّ تسلسل عرض هذه الصناديق يختلف بناءً على حجم نافذة المُتصفّح -بالإضافة إلى جذع الصفحة - ولذلك ستستهلك هذه الصناديق مزيدًا من الصفوف عند عدم توفر مساحة كافية لعرض هذه الصناديق بجانب بعضها البعض، حيثُ كُلّما تَمّ تصغير حجم نافذة المُتصفّح كُلّما ازداد عدد الصفوف. تحرير الطوفانتعمل خاصيّة الطوفان float جنبًا إلى جنب مع الخاصيّة clear، حيثُ تُكمّل الخاصيّتان بعضُهما البعض لتُقدّم للمُطوّر أداة تطوير أفضل وأسهل. تمّت الإشارة سابقًا إلى أن العنصر المُطوف يتوضع في التدفّق الطبيعيّ في بادئ الأمر، ثم يُزال منه. هذا يعني أنّ كُلّ عنصر يتبع هذا العنصر سوف يعمل بطريقة مُغايرة لما هو مُتوقع، هذا السلوك هو ما يُربك البعض في خاصيّة الطوفان . يوجد في المثال التالي صندوقان مُطوّفان هما الورديّ والأزرق، ومِن ثُمّ صندوقان غير مُطوّفان هما الأخضر والبرتقالي. <!-- HTML --> <div class="block pink float"></div> <div class="block blue float"></div> <div class="block green"></div> <div class="block orange"></div> /* CSS */ .block { width: 200px; height: 200px; } .float { float: left; } .pink { background: #ee3e64; } .blue { background: #44accf; } .green { background: #b7d84b; } .orange { background: #E2A741; }كُلّ شيءٍ في المثال السابق واضح ماعدا عدم ظهور الصندوق الأخضر من العرض، وتوضعه أسفل الصندوق الورديّ، حيثُ أنّ الصندوق الورديّ والصندوق الأزرق هي عناصر مُطوّفة، وتتوافق طريقة عرضها في المُتصفّح بناءً على المعلومات التي توصلنا إليها حتّى الآن، حيثُ أنّها تُسحب من تسلسل عرض التتدفّق الطبيعيّ وتصطف بجانب بعضها البعض، وهذا ما أخفى الصندوق الأخضر، ولإظهاره يجبُ استخدام الخاصيّة clear. تملك الخاصيّة clear خمس قيم هي: يسار left، يمين right، الطرفين both، مَوروث inherit ولا شيء none. تجعل القيمة left العنصر أسفل أي عنصر مُطوف إلى جهة اليسار، وتجعل القيمة right العنصر أسفل أي عنصر مُطوف إلى جهة اليمين، واستخدام القيمة both تجعل من العنصر أسفل أي عنصر مُطوف على الجهتين اليُمنة واليسرى، أما القيمة inherit فتجعل من العنصر يرث قيمة العنصر الأب للخاصيّة clear. في المثال التالي تم استخدام الخاصيّة clear بالقيمة left مع الصندوق الأخضر. <!-- HTML --> <div class="block pink float"></div> <div class="block blue float"></div> <div class="block green clear"></div> <div class="block orange"></div> /* CSS */ .block { width: 200px; height: 200px; } .float { float: left; } .clear { clear: left; } .pink { background: #ee3e64; } .blue { background: #44accf; } .green { background: #b7d84b; } .orange { background: #E2A741; }يجعل التعديل الأخير على الصندوق الأخضر من الصندوق الورديّ وكأنّه في التدفّق الطبيعيّ لمُستند HTML، على الرَغم من أنّه ليس كذلك، وهذا ما يجعل من الخاصيّة clear خاصيّة رائعة والتي تُساعد على إرجاع عنصر غير مُطوف ليُعرض بشكل مُتوافق مع التدفّق الطبيعيّ ويَظهر على المُتصفّح كما هو مُتوقع له أن يظهر. بعد فهم عمل هاتان الخاصيّتان سيكون من السهلِ ابتكارُ أساليب جديدة للتعامل مع شيفرة HTML وCSS استخدام الطوفان لتقسيم الصفحاتتبرز أهمّيّة خاصيّة الطوفان عند استخدامها في إنشاء تقسيمات الصفحة ، حيثُ بإمكاننا إنشاء صفحة بعمودين بطرق عدّة، وأغلب هذه الطُرق تستخدم عنصرًا مُطوّفًا واحدًا أوعنصرين مطوّفين. لنأخذ مثالًا بسيطًا: يحتوي موقع على عمودين، حيثُ المُحتوى على الجانب الأيسر وشريط التنقل الجانبي على الجانب الأيمن، في أعلى الصفحة يوجد ترويسة header وأسفل الصفحة يوجد ذيل الصفحة footer. #container { width: 960px; margin: 0 auto; } #content { float: left; width: 660px; background: #fff; } #navigation { float: right; width: 300px; background: #eee; } #footer { clear: both; background: #aaa; padding: 10px; } تحليل ملف التنسيق السابق يُظهر أنّ الحاوية الرئيسة والتي تُدعى container تُقيّد عناصر الصفحة المُطوفة في موضعها الذي يجب أن تكون عليه، ولو لم يكن لدينا هذه الحاوية لكانت العناصر المُطوفة مُلتصقةً على حواف نافذة المُتصفّح، وأما العناصر المُطوفة داخل الحاوية فهي content و navigation. يُمكن الحصول على تقسيمٍ ذو عمودان وذلك بأنّ نُطوّف المُحتوى content إلى جهة اليسار، وشريط التنقّل الجانبي navigation إلى جهة اليمين، ولكلٍ منهما قيمة عرض مُحددة بـ 660px للمُحتوى و300px لشريط التنقّل الجانبي، وبذلك سيستحوذ هذان العنصران عرض الحاوية بالكامل (960px). أخيرًا تم تحديد الخاصيّة clear على ذيل الصفحة footer، والتي من شأنها أنّ تُعيد العناصر التي تلي أي عناصر مُطوفة إلى التدفّق الطبيعيّ، في هذه الحالة حُددت القيمة both لذيل الصفحة footer، لجعله يصطفُ أسفل المحتوى وشريط التنقّل الجانبي. يُظهر المثال التالي كيفية عرض ذيل الصفحة footer في حال عدم استخدام الخاصيّة clear، ويُلاحظ كيف أنّ ذيل الصفحة انتقل إلى أسفل شريط التنقّل الجانبي، وذلك يحدث بسبب وجود مساحة كافية له أسفل الشريط، وأيضًا هذا السلوك هو مُتوافق مع التدفّق الطبيعيّ الذي نعمل به، ولكن هذا بالطبع ليس ما نريده. يُفترض الآن أن يكون الأمر واضحًا كيف أنّ الخاصيّتين float وclear تعملان جنبًا إلى جنب وكُل منهما يُكمّل الآخر. الطوفان أولًاحتى الآن جميع الأمثلة السابقة كانت واضحة وبعيدةً عن المشاكل، حيثُ هناك حالات دقيقة يجبُ الإشارة إليها عند استخدام خاصيّة الطوفان. واحدةٌ من أهمّ هذه الحالات هي غير مُرتبطة بشكل مُباشر مع تقنيّة CSS بل مع تقنيّة HTML نفسها، حيثُ يختلف توضع العنصر المُطوف عن ما هو مُتوقع له أنّ يكون فيه، كما في المثال التالي حيثُ لدينا صندوق صغير نوعًا ما وبداخله صورة مُطوفة إلى جهة اليمين وبجانبها نصٌّ، ويملك العنصر الأب، وهو الحاوية، مساحة عرض مُحدودة (280px) ليُحيط بالعناصر المُطوفة بداخله. #container { width: 280px; margin: 0 auto; padding: 10px; background: #aaa; border: 1px solid #999; } img { float: right; } <div id="container"> <img src="image.gif" /> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> </div> حتى الآن لا يوجد ما هو غريب في المثال السابق، ولكن ماذا لو كان ترتيب العناصر في صفحة HTML مُختلفٌ بعض الشيء، حيث الصورة بعد النَصّ <div id="container"> <p>...</p> <img src="image.gif" /> </div> النتيجة ليست مرضية أبدًا، حيث انتقلت الصورة من أعلى الزاوية اليُمنى إلى أسفل النصّ، ليس هذا فقط بل أصبحت الصورة خارج الحاوية الخاصّة بها. إذا ما المُشكلة؟ في الحقيقة سبب المُشكلة يحتاج إلى شرحٍ والذي سنتطرّق إليه لاحقًا، ولكن الجدير بالذكر الآن أنّه من المُمكن تطبيق قاعدة "التطويف أولًا"، أيّ أنّ العناصر المُطوفة تأتي قبل العناصر غير المُطوفة في مُستند HTML، قد لا تعطي هذه القاعدة النتيجة المطلوبة دائمًا ولكن من الجيد تذكرها. أما سبب ظهور الصورة خارج حدود الحاوية الخاصّة بها فهو يعود إلى ما يُسمى بالانْطِواء collapsing. الانْطِواء Collapsingالانْطِواء هو عندما لا يتوسّع العنصر الأب الذي يحتوي على أي عدد من العناصر المطوفة بشكلٍ كامل ليُحيط بها كما لو كان سيفعل لو كانت هذه العناصر غير مُطوفة. في المثال السابق لم تكن المُشكلة في المُتصفّح نفسه والترتيب الذي ظهر عليه المُحتوى في المثال السابق هو ترتيب منطقيٌّ، حيثُ أنّه تُسحب العناصر المُطوفة من التدفّق الطبيعيّ للعناصر على الصفحة، لذلك لا تَعتبر الحاوية container العناصر المُطوفة جزءًا منها وتتعامل معها وكأنّها غير موجودة. لمزيد من التفاصيل حول هذا الموضوع يُمكن الرجوع إلى مقالة بعنوان: احتواء الطوفان. يُوضّح المثال التالي حاوية بداخلها صندوقين <!-- HTML --> <div class="container"> <div class="block pink"></div> <div class="block blue"></div> </div> /* CSS */ .container { background: rgb(168, 207, 166); width: 600px; margin: auto; } .block { width: 200px; height: 200px; margin-left: 64px; }يُلاحظ بعد إضافة الطوفان إلى الصندوقين اختفاء الحاوية من المُتصفّح، هل أصبحت تحت الصندوق الأزرق؟ أم الورديّ؟ أم ربما الأخضر الذي هو تحت الورديّ؟ في الحقيقة ما حدث هو أنّ الحاوية انطوت على نفسها بسبب عدم وجود عناصر لاحتوائها بعد الطوفان، ويبدو ذلك جليًا بعد إضافة حدودٍ للحاوية. بعد أن توضّحت المُشكلة سوف نتطرّق إلى الحلول المُتوفرة، حيثُ يوجد طُرق عدّة لحل هذه المُشكلة، تعدّد الحلول يعود إلى المُرونة في اختيار الحلّ الأنْسَب، فالحلول المطروحة قد لا تُناسب جميع الحالات. تُعتبر الطريقة التالية أقدم الطُرق في حل مُشكلة الانطواء، وهي باستخدام الخاصيّة clear بعد العنصر المُطوف، وذلك بجعل العنصر الأب مُمتدًا إلى ما بعد العنصر المُطوف، حيثُ يتم إضافة div مع تنسيق مُضمّن clear: right، والذي يجعل من الصورة المُطوفة مأخوذةً بالحسبان. يعمل هذا الحل بشكل جيّد جدًا ومع جميع المُتصفحات ومن دون أي مشاكل في التوافقية، ولكن استخدام تنسيق مُضمّن يُخالف قاعدة الفصل بين مُستند HTML و ملف التنسيق CSS لذلك لا يُحبّذ العديد من المُطوّرين هذه الطريقة. <div id="container"> <p>...</p> <img src="image.gif" /> <div style="clear: right;"></div> </div> في المثال التالي لدينا عنصر أب يحتوي على ثلاثة صور مُطوفة، من المُلاحظ كيف أن الصور الثالثة خارج الحاوية. <div id="container"> <img src="image.gif" /> <img src="image.gif" /> <img src="image.gif" /> </div> لتصحيح طريقة العرض سنستخدم CSS بدلًا من التنسيق المُضمّن، تسمح الطريقة التالية للعنصر الأب بالتوسّع ليُحيط بالعناصر المُطوفة، حيثُ يتم إضافة الخاصيّة فيضان overflow للعنصر الأب مع القيمة hidden. الجدير بالذكر هنا أنّه لم تُنشئ هذه الخاصيّة بهدف حل مُشكلة الانطواء، لذلك قد يكون لها بعض المشاكل، فمثلًا قد يختفي المُحتوى من الظهور عندما يكون أكبر من أنّ يتسع داخل الحاوية، لذلك يجب الحذر عن استخدام هذه الطريقة. #container { overflow: hidden; width: 260px; margin: 0 auto; padding: 10px 0 10px 10px; background: #aaa; border: 1px solid #999; } يُوضح المثال التالي اختفاء المحتوى من الظهور عند استخدام خاصيّة overflow. يوجد طريقة أُخرى لحل مُشكلة الانطواء والّتي تعطي نتائج جيّدة كما في الحلول السابقة، وهي استخدام شبه العناصر pseudo-elements المُسمى "بعد" after. #container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } تقوم أوراق الأنماط المُتتالية CSS بإضافة عنصر جديد بعد الحاوية container مع بعض المُحتوى، في المثال السابق هو النقطة (.)، وإخفائه من العرض وبدون ارتفاع. يُمكن القراءة عن هذه الطريقة بمزيد من التفصيل عبر موقع: التمركز أهمّ ما في الأمر. تقوم جميع الطرق السابقة بحل مُشكلة الانطواء، والطريقة الأخيرة هي الأكثر استخدامًا في الوقت الحالي بعد تطوّر المُتصفحات ودعمها لمعايير CSS3. يقدم الموقع التالي أفضل استخدام لهذه الطريقة ويُوضح تطوّر الشيفرة الخاصة بها عبر الوقت: إصلاح الانطواء. خاتمةأصبحت الخاصيّة float من الأدوات الأساسيّة في تصميم صفحات مُتجاوبة، لذلك فهم آليّة عمل هذه الأداة والمشاكل الخاصّة بها سيقدم للمطوّر أداة عمليّة لا يستطيع الاستغناء عنها. ترجمة -وبتصرّف- للمقال: CSS Floats 101 لصاحبه Noah Stokes