سر التعويم وعدم تغيير حجم Div

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

لفهم هذا السلوك، نتعمق في تعقيدات التعويم تحديد المواقع. عندما يتم تعويم عنصر ما (في هذه الحالة، .inline div)، تتم محاذاة المحتوى الموجود أسفله مع الجانب الأيمن من ذلك العنصر. ومع ذلك، لا يزال عرض الكتلة المحتوية التي أنشأها العنصر اللاحق (القسم .yellow) محفوظًا.

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

وبالتالي، إذا كان عنصر مستوى الكتلة (مثل .yellow div) له خلفية، فسوف يمتد عبر العنصر العائم.

الحل

وفقًا لمستوى CSS 2.1، يجب ألا تتداخل العناصر ذات خصائص معينة (بدائل على مستوى الكتلة، والعناصر التي تنشئ سياق تنسيق كتلة جديدًا) مع مربع الهامش الخاص أي يطفو في نفس السياق. إن إضافة خاصية "تجاوز السعة" بخلاف "مرئي" إلى القسم .yellow يمنعها من تداخل العنصر العائم.

عندما يكون التداخل مفيدًا

من المهم لاحظ أن التداخل يمكن أن يكون مفيدًا في المواقف التي يكون فيها المحتوى بعد العنصر العائم طويلًا بما يكفي للاستمرار بشكل طبيعي. قد يؤدي تقييد المحتوى افتراضيًا إلى عدم تدفقه تحت العنصر العائم.