في الشهرين الماضيين، كنت أعمل كفنان على العديد من مواقع الويب بشكل متقطع، وفي هذه العملية، اكتسبت فهمًا أفضل للتطوير القياسي لـ DIV+Css. هناك شيئان أكسباني أكثر من غيرهما، الأول هو أنني فهمت نموذج CSS Box تمامًا، والآخر هو أنني قمت بحل مشكلة "العناصر العائمة المغلقة" التي أزعجتني لفترة طويلة:
بشكل عام، إذا كان العنصر الفرعي يستخدم تعويمًا، فلن يتمكن العنصر الأصلي دائمًا من معرفة بالضبط أين ينتهي العنصر الفرعي، لذا فإن الحد السفلي للعنصر الأصلي يمر دائمًا عبر منتصف العنصر الفرعي أو حتى الجزء العلوي منه، مما يبدو غير مريح للغاية.
في البداية، أضفت <br /> أو <div></div> بعد العنصر الفرعي وقمت بتعيين السمة الخاصة به على "clear:all;"، لكن هذا يتطلب الكثير من المسافات غير المفيدة، وحتى بعض مواقع الويب تحتاج إلى تعديل رمز ASP لإضافة هذه العلامات الفارغة تلقائيًا، وهو ما لا يمكن اعتباره إلا الملاذ الأخير.
اكتشفت لاحقًا أنه عندما يتم تعيين العلامة الأصلية أيضًا على أن تكون عائمة، يمكن إغلاقها في الموضع الصحيح، لذلك قمت بتعويم العلامة الأصلية بهذه الطريقة، ولا يلزم تغيير الكثير من أكواد ASP عند مواجهتها الحاجة إلى إضافة سمة واضحة إذا لم يكن من الممكن إضافة العلامة الفارغة من القالب ولكن يجب إضافتها من رمز ASP، فلا داعي لتغيير رمز ASP، ما عليك سوى تعيين الحاوية الأصلية على أنها عائمة لا تزال بحاجة إلى تغيير ASP، ثم تغيير الحاوية الأصلية، سيؤدي تعيين الحاوية الرئيسية على العائمة والعائمة طبقة تلو الأخرى إلى حل المشكلة دائمًا. على الرغم من أن هذا يمكن أن يوفر الكثير من المتاعب، إلا أنه يمكن أن يتسبب بسهولة في ملء الصفحة بأكملها بالعناصر العائمة، -_-!!! لا يمكن اعتبارها سوى استراتيجية متوسطة.
لاحقًا، عندما كنت أبحث عن أشياء أخرى على الإنترنت، وجدت بالصدفة شخصًا قال إن مجرد إضافة الخاصيتين التاليتين إلى خصائص CSS للحاوية الأصلية من شأنه أن يحل المشكلة:
الفائض: تلقائي؛
_الارتفاع: 1%؛
لقد جربتها، وقد نجحت حقًا، وبهذه الطريقة، ينبغي اعتبار هذا أفضل طريقة لحل هذه المشكلة في الوقت الحالي: ليست هناك حاجة لتعديل مهمة الصفحة، وليست هناك حاجة في الأساس إلى تعديل الصفحة الرئيسية. الحاوية - حتى الحاوية الأصلية للحاوية الأصلية، إذا قمت بإجراء أي تغييرات، فما عليك سوى إضافة سمتين غير مهمتين إلى الحاوية الأصلية، وبذلك تكون قد انتهيت.