ملخص طرق مسح العوامات (إغلاق العناصر العائمة)

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

أبسط حالة هي أن نقوم بتضمين عنصر div صغير وثابت العرض (مثل التنقل والمرجع وما إلى ذلك) في div كبير مع محتوى العنصر الآخر. على سبيل المثال، الكود التالي:

<div id="outer">
<div id="inner"> <h2>عمود</h2> </div>
<h1>المحتوى الرئيسي</h1>
<p>لوريم إيبسوم</p>
</div>

يمكننا تعيين قيمة عرض (على سبيل المثال، 20%) لـ "#inner"، ولكن نظرًا لأن div عنصر على مستوى الكتلة، فحتى إذا قمنا بتعيين العرض، فلا يمكن عرض المحتوى الموجود خلفه إلا في السطر التالي ما لم نقم بذلك أعطها خاصية تعويم (إما أن تطفو إلى اليسار أو تطفو إلى اليمين). ثم ستظهر المشكلة التي ذكرناها أعلاه في هذا الوقت.

لن تكون هذه مشكلة إذا كان عرض "#inner" وارتفاعه أصغر من "#outer".

ومع ذلك، إذا كان ارتفاع "#الداخلي" يتجاوز ارتفاع "#الخارجي"، فإن الجزء السفلي سيتجاوز الجزء السفلي من "#الخارجي". وذلك لأنه بعد أن قمنا بتعيين السمة العائمة لـ "#inner"، فسوف تنفصل عن تدفق النص، وبغض النظر عن مدى تغير عرضها وارتفاعها، فإن "#outer" لن يتبع التغيير.

الحل:

1) طريقة العلامات الإضافية

الطريقة الأولى والطريقة الموصى بها من قبل W3C هي استخدام علامات إضافية. تتمثل هذه الطريقة في إضافة علامة فارغة في نهاية المحتوى. الطريقة النموذجية هي استخدام شيء مثل:
<br style="clear:كلاهما;"

أو استخدم
<div style="clear:both;"></div>

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

ملاحظة: وجدت أنه في Internet Explorer (سواء 6 أو 7) <br style="clear:both" /> يمكنه مسح العناصر العائمة، لكن لا يمكنه إغلاق العناصر العائمة. هذه المشكلة غير موجودة في Firefox ولا أعرف السبب ؟ !

2) استخدم الفئة الزائفة التالية

لإضافة محتوى جديد في نهاية المحتوى الحالي المحدد باستخدام الفئة الزائفة اللاحقة وإعلان المحتوى. الطريقة الشائعة هي إضافة "نقطة" لأنها أصغر حجمًا وأقل وضوحًا. ثم نستخدمه لمسح العنصر العائم (إغلاق العنصر العائم) وإخفاء المحتوى:
#الخارجي:بعد{
محتوى:"."؛
الارتفاع: 0؛
الرؤية:مخفية؛
عرض:كتلة؛
واضح:كلاهما؛

والغريب في الأمر أن Internet Explorer 6 والإصدارات الأقدم في Windows لا يدعم الفئة الزائفة التالية في CSS 2.1، ولكن يمكن استخدام Internet Explorer في Mac بشكل طبيعي، لذا يتعين علينا التعامل مع Win/IE بشكل منفصل. من بين الطرق العديدة للتمييز بين Internet Explorer في Win وMac، الطريقة الأكثر استخدامًا هي خدعة Holly، كود CSS:
/* لا يمكن رؤية هذا الرمز إلا بواسطة IE/Win*/
قواعد CSS
/*End Hack */

يوجد سطرين من التعليقات في الكود أعلاه، وتظهر شرطة مائلة عكسية () في نهاية السطر الأول، وسيعتقد Internet Explorer على نظام Mac أن التعليق لم ينته، ​​لذلك يستمر حتى يظهر السطر الأول "*/" كاملًا، ويتم اعتبار جميع الأحرف الموجودة في المنتصف بمثابة تعليقات، ولكن IE/Win سيعتبر السطرين الأول والثالث فقط بمثابة تعليقات، أما الأحرف الوسطى فهي رموز صالحة. وهذا ما يميز IE على منصات مختلفة.

بناءً على المبادئ المذكورة أعلاه، لتنظيف العوامات على IE 6 في Windows، يمكنك استخدام الكود التالي:

#الخارجي {
عرض: كتلة مضمنة؛
}
/* بداية اختراق هولي */
* أتش تي أم أل #الخارجي {
الارتفاع: 1%؛
}
#الخارجي {
عرض:كتلة؛
}
/* نهاية الاختراق */

ملاحظة: إذا كنت لا تفكر في مستخدمي IE6/Mac، فأنت تحتاج فقط إلى كتابة * html #outer {height:1%;}.
بالإضافة إلى ذلك، يبدو أن العرض:inline-block لا يعمل بشكل جيد في Internet Explorer 7. لذا استخدم حيل الاختراق الأكثر اكتمالاً.

3) تعويم العناصر الخارجية طريقة التعويم في التعويم

بسيطة للغاية، وهي تعويم العنصر "#الخارجي" (إلى اليسار أو اليمين).

لكن هناك مشكلة أخرى تسببها هذه الطريقة وهي أن العنصر التالي المجاور لـ "#outer" سيتأثر بـ "#outer" وسيتغير موضعه، لذا يجب الحذر عند استخدام هذه الطريقة. هناك خيار لتعويم كافة العناصر الموجودة في الصفحة، وأخيرًا استخدام عنصر مناسب ذو معنى (مثل التذييل) لتنظيف العناصر العائمة، وهذا يساعد على تقليل العلامات غير الضرورية، ولكن وجود عدد كبير جدًا من العناصر العائمة سيزيد من صعوبة التخطيط.

4) اضبط التجاوز على مخفي أو تلقائي.

التجاوز

للسمة "#outer" على مخفي أو تلقائي لتنظيف العوامات أيضًا.

لكن كن حذرًا عند استخدام التجاوز لأنه يؤثر على أداء المتصفح. بالإضافة إلى ذلك، لا يمكن ببساطة تعيين التجاوز على مخفي أو تلقائي في Internet Explorer 6 مسح التعويم بشكل فعال (إغلاق العنصر العائم). يجب عليك أيضًا تحديد بُعد "#outer"، أي تحديد عرض أو ارتفاع له :
#الخارجي {
تجاوز السعة: تلقائي؛
العرض: 100%؛
}

ملاحظة: إذا كنت تريد استخدام هذه الطريقة لمسح العوامات (إغلاق العناصر العائمة) على IE5/Mac، فيجب عليك تعيين سمة الفائض على مخفية.

قارن واختر

أي من الطرق الأربع هو الأفضل؟ أولاً، لا يُنصح باستخدام الفئة الزائفة التالية، فبالمقارنة مع الطرق الثلاثة الأخرى، فإن الخدعة المقدسة مرهقة بعض الشيء ويصعب إتقانها. إن الخدعة المقدسة التي ذكرتها أعلاه ليست مجرد مشكلة في IE/. Win.عندما يظهر:hover، ستكون هناك أيضًا مشكلات أخرى، لذلك أضفنا سمات مثل inline-block، مما يعني أن هناك المزيد من عدم اليقين في هذه الطريقة. موصى به للأشخاص "النظيفين" فيما يتعلق بالبرمجة ولديهم مهارات تقنية عالية.

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

ومن المستحسن استخدام علامات إضافية لمسح العوامات (إغلاق العنصر العائم). بواسطة W3C. أما بالنسبة لاستخدام عناصر <br /> أو <div></div> الفارغة، فيمكنك الاختيار وفقًا لتفضيلاتك الخاصة (بالطبع يمكنك أيضًا استخدام عناصر أخرى على مستوى الكتلة). ومع ذلك، تجدر الإشارة إلى أن <br /> نفسه يتمتع بأداء، وسيكون له فاصل أسطر إضافي، لذا يجب ضبط ارتفاعه على 0 لإخفاء أدائه. لذا، في معظم الحالات يكون من المناسب استخدام <div> فارغًا.

يعد Float-in-float أيضًا خيارًا جيدًا، ما عليك سوى إضافة طبقة من <div> إلى الطبقة الخارجية للعنصر الذي تريد تنظيفه وتعيين تحميل السمة: يسار، ولكن انتبه إلى التغييرات في العناصر المجاورة.