وفقًا لمواصفات CSS، يتم نقل العوامات خارج تدفق المستند ولا تؤثر على تخطيط مربعات الكتل ولكن فقط على ترتيب المربعات المضمنة (عادةً النص). لذلك، عندما يتجاوز ارتفاعها الحاوية المحتوية، لن تمتد الحاوية الأصلية العامة تلقائيًا لإغلاق العنصر العائم. لكن في بعض الأحيان نحتاج إلى سلوك الإغلاق التلقائي هذا، فكيف نتعامل معه؟
إحدى الطرق للقيام بذلك هي إدراج تسمية إضافية في الحاوية الأصل وتوضيح توسيع الحاوية الأصل. تتمتع هذه الطريقة بتوافق جيد مع المتصفح ولا توجد بها أي مشاكل. عيبها هو أنها تتطلب علامات إضافية (وعادةً ما تكون غير دلالية)، لذا فأنا شخصيًا لا أحبها.
لاحقًا، ظهرت طريقة جديدة، باستخدام الفئة الزائفة: after لتضمين عنصر ديناميكيًا لمسح العوامات. هذه الطريقة لها نفس مبدأ الطريقة السابقة، باستثناء أنه يتم إنشاء المحتوى الإضافي باستخدام CSS، ولكن IE لم يفعل ذلك الدعم : بعد وكان عليه القيام بالكثير من الاختراقات. تتمتع هذه الطريقة بتوافق عام، ولكنها يمكنها التعامل مع متصفحات مختلفة من خلال عمليات اختراق مختلفة، وفي الوقت نفسه يمكنها التأكد من أن HTML نظيف نسبيًا، لذلك لا يزال يتم استخدامه في كثير من الأحيان.
اكتشف أحد الأشخاص لاحقًا أن تعيين تجاوز سعة الحاوية الأصلية على قيمة غير مرئية يمكن أن يؤدي إلى إغلاق العنصر العائم في متصفح متوافق مع المعايير، وبطبيعة الحال، لا يدعمه IE، لذا فإن هذه الطريقة صالحة مثل الطريقة السابقة يقوم بمعالجة مختلفة (تحديدًا تشغيل التخطيط). والفرق هو أن التجاوز ليس مزعجًا مثل: بعد الفئة الزائفة، كما أنه يحتوي على عيوب.
قبل استخدام الفائض، كانت هناك طريقة أخرى لاستخدام التعويم، وهي جعل الحاوية الأصلية تطفو. وهذا يستفيد من خاصية العناصر العائمة - العناصر العائمة ستغلق العناصر العائمة. هذه الطريقة لها نتائج جيدة في IE/Win والمتصفحات المتوافقة مع المعايير، ولكن العيب واضح أيضًا - قد لا تطفو الحاوية الأصلية لمجرد أنها تريد أن تطفو، ففي النهاية، يعد التعويم سلوكًا خاصًا، وفي بعض الأحيان لا يكون التخطيط كذلك صحيح أن السماح لها بالطفو أمر طبيعي أيضًا. على الرغم من أنه يمكن إغلاق العناصر العائمة في متصفحات IE والمتصفحات المتوافقة مع المعايير، إلا أن المبدأ يختلف في IE/Win، حيث يقوم float بتشغيل التخطيط وبالتالي إغلاق العائمة مبدأ التجاوز في هذه الطريقة هو نفسه، مما يؤدي إلى "نطاق تنسيق على مستوى الكتلة" - وهي ظاهرة مذكورة في مواصفات CSS، وغالبًا ما تتمتع ببعض الاستقلالية، وهي أنها ستغلق التعويم الداخلي تلقائيًا . عنصر.
حسب المواصفات، تؤدي الأنواع التالية من العناصر إلى نطاق تنسيق على مستوى الكتلة:
● يمكن أن تكون العناصر العائمة إما لليسار أو لليمين.
● العناصر الموضوعة تماما.
● عنصر الكتلة المضمنة، لكن أبو بريص هذا لا يدعمه حاليًا.
● عناصر نوع خلية الجدول، في الواقع، الجدول، مجموعة رأس الجدول، صف الجدول، وما إلى ذلك مقبولة أيضًا، بالإضافة إلى الجدول المضمن (غير مدعوم من قبل أبو بريص)، لأنها جميعها تولد جدولًا مجهولًا بشكل غير مباشر. خلية.
● التجاوز هو عنصر قيمته غير مرئية.
لذلك، اتضح أنه في المتصفحات المتوافقة مع المعايير، يمكننا أيضًا الحصول على العديد من الطرق لإغلاق عنصر عائم، ولا نحتاج إلا إلى CSS، وليس هناك حاجة إلى أي شيء آخر. بالمناسبة، بالإضافة إلى الفائض، ما ورد أعلاه له تأثير إضافي يتمثل في تقليص عرض الحاوية الأصلية تلقائيًا.
بالنسبة لـ IE/Win، لديه نظام خاص به، وهو التخطيط. العناصر ذات التخطيط ستغلق العناصر العائمة تلقائيًا. دعنا نلقي نظرة على خصائص CSS التي تؤدي إلى التخطيط. ستجد أن هناك العديد من أوجه التشابه مع التنسيق على مستوى الكتلة النطاق أعلاه:
● العناصر العائمة ● العناصر ذات الموضع المطلق ● العرض: كتلة مضمنة
● التكبير
● العرض/الارتفاع
● تجاوز السعة/تجاوز-x/تجاوز-y [جديد في IE7]
● الحد الأقصى/الحد الأدنى للعرض/الارتفاع [جديد في IE7]
مما سبق، هناك العديد من الطرق لإغلاق العناصر العائمة في IE، وبطبيعة الحال، جميعها لها حدودها، إما أن يكون لها آثار جانبية أو تستخدم سمات غير قياسية (والتي لا يمكنها اجتياز عملية التحقق).
شيء آخر يجب ذكره هو العرض:inline-block. هذه السمة نفسها ليست ذات فائدة لـ IE. التأثير الفعلي هو فقط إضافة تخطيط إلى عنصر سرًا. ومع ذلك، تتعرف المتصفحات المتوافقة مع المعايير على هذه السمة، لذلك لا تؤثر عليها بالنسبة للمتصفح، تحتاج إلى إعادة العرض إلى الوضع الافتراضي. يوجد خطأ في IE هنا إذا قمت بتعريف العرض: inline-block أولاً، ثم قمت بضبط العرض مرة أخرى على الحظر (يجب وضع هاتين الشاشتين في عبارتي CSS واحدة تلو الأخرى ليكون لها تأثير)، ثم سيظهر التخطيط. لن يختفي، وفي الوقت نفسه، لن يختفي التخطيط، ولن يؤثر على المتصفحات الأخرى، لذا، في الوقت الحالي، تعد هذه أيضًا طريقة جيدة لتشغيل التخطيط:
| .gainlayout{العرض:مضمنة كتلة؛} .gainlayout{العرض:كتلة؛} |
لذلك، هناك العديد من الطرق لإغلاق العناصر العائمة عبر المتصفحات. تتطلب كيفية استخدام خصائص CSS معًا تحليلًا تفصيليًا للموقف المحدد، ومن الضروري أيضًا تطبيق التعليقات الشرطية بمرونة العودة واستخدام واضح ويمكن استخدامه.