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

تنصل

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

خصائص العنصر ذو التعويم التي يجب أن تضعها في الاعتبار دائمًا

إذا تم ضبطه على اليسار أو اليمين

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

حادثة الحياة رقم 1

لدي كتلتان، قمت بتطبيق التعويم: مباشرة على إحدى الكتل، وكانت محاذية لليمين، لكنها ظلت أسفل الكتلة الأولى. مثال على ما يبدو.

سبب

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

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

أيضًا الجميعمحتوى الموقع الذي يأتي في كود HTML بعدتتدفق العناصر العائمة من حولها، مما يؤدي غالبًا إلى تأثير غير متوقع.

حل

الحل رقم 1. قم بتعيين ارتفاع الحاوية بشكل صريح. في الحالات التي تكون فيها أبعاد الحاوية معروفة، فهذا هو الحل الأبسط.

الحل رقم 2. أضف كتلة فارغة مع مسح: كلاهما . تؤدي إضافة مثل هذا العنصر إلى إزالة "طفو" الكتل ويجعل الحاوية تمتد إلى ارتفاعها الكامل. من الناحية الدلالية، هذا ليس الحل الأفضل، لأنه يقدم عنصر ترميز إضافي.

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

محدث
اقرأ أيضًا من SelenIT2 كاستمرار لمناقشة الخاصية العائمة.

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

تنصل

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

خصائص العنصر ذو التعويم التي يجب أن تضعها في الاعتبار دائمًا

إذا تم ضبطه على اليسار أو اليمين

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

حادثة الحياة رقم 1

لدي كتلتان، قمت بتطبيق التعويم: مباشرة على إحدى الكتل، وكانت محاذية لليمين، لكنها ظلت أسفل الكتلة الأولى. مثال على ما يبدو.

سبب

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

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

أيضًا الجميعمحتوى الموقع الذي يأتي في كود HTML بعدتتدفق العناصر العائمة من حولها، مما يؤدي غالبًا إلى تأثير غير متوقع.

حل

الحل رقم 1. قم بتعيين ارتفاع الحاوية بشكل صريح. في الحالات التي تكون فيها أبعاد الحاوية معروفة، فهذا هو الحل الأبسط.

الحل رقم 2. أضف كتلة فارغة مع مسح: كلاهما . تؤدي إضافة مثل هذا العنصر إلى إزالة "طفو" الكتل ويجعل الحاوية تمتد إلى ارتفاعها الكامل. من الناحية الدلالية، هذا ليس الحل الأفضل، لأنه يقدم عنصر ترميز إضافي.

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

محدث
اقرأ أيضًا من استمرارًا لمناقشة خاصية التعويم.

خاصية CSS موصوفة بالتفصيل يطفو، ميزات التطبيق ودقة الاستخدام، يتم تقديم أنواع تحديد موضع عناصر HTML.

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

المصطلح

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

أنواع تحديد موضع عناصر HTML

لتقديم ما سبق بوضوح، يجب عليك أيضًا معرفة المبادئ الأساسية لعرض العناصر في مستندات HTML.
وفقًا لـ w3.org، يستخدم ترميز الويب ثلاثة تخطيطات للعناصر في مستندات الويب.
التدفق الطبيعي- في CSS 2.1، يتضمن التدفق الطبيعي لمستند الويب العناصر المقدمة كمربعات كتلة، والعناصر المنسقة كمربعات مضمنة، والموضع النسبي للمربعات المضمنة والكتل.
بمعنى آخر، يتضمن التدفق العادي عناصر تخطيط عادية لا تحتوي عليها يطفو، متساوي يسار يمين، أو موضع، متساوي مطلق/ثابت .
يطفو– يتم أولاً وضع العنصر العائم وفقاً لقواعد التنسيب في التدفق الطبيعي، ثم يتم إزالته من هذا التدفق وإزاحته في خطه إلى اليسار أو اليمين قدر الإمكان.
افهم هذه القاعدة المهمة بوضوح. نظرًا لأن العناصر العائمة مشتقة من التدفق الطبيعي للمستند، فإن مربعات الكتل ذات التدفق العادي لا تراها، لكن الصناديق المضمنة ذات التدفق العادي تراها وتتدفق حول جانب واحد، على وجه الخصوص، تتضمن النص العادي لمربعات الكتل. هذا يعني أنه عند وضع مربعات كتل التدفق العادية، إذا لم ينتبهوا لوجود الصناديق العائمة، فإن محتويات هذه المربعات (العناصر المضمنة) تتدفق حول هذه العناصر.
تحديد المواقع المطلقة- مع تحديد الموضع المطلق، يتم إزالة الصندوق تمامًا من التدفق الطبيعي (لا يؤثر على التدفقات اللاحقة) ويتم وضعه بالنسبة لموضع الحاوية الخاصة به، أي العنصر الذي تم وضعه فيه.
يمكنك قراءة المزيد حول تدفقات مستندات HTML في المقالة

الاختلافات بين العناصر العائمة والموضعية

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

الآن دعونا نبدأ.

ما هو تعويم؟

"Float" هي إحدى خصائص CSS لعنصر ترميز الكتلة، والتي بسببها يتم نقل عنصر HTML إلى أقصى الموضع الأيسر أو الأيمن المتاح لوضعه داخل الحاوية التي تحتوي على هذا العنصر. إذا لم يكن هناك عرض كافٍ في الصف الحالي للحاوية لاستيعابها، فسيتم نقلها إلى الصف التالي حتى يمكن احتواؤها. لاحظ أن العرض يطفويتم تحديد العنصر من خلال محتواه. اعتمادا على القيمة المحددة يطفو، يمكن أن تتدفق العناصر المضمنة حول عنصر الكتلة هذا على أحد جوانبه الأفقية.
ملكية يطفويمكن أن تأخذ القيم التالية: لا أحد(تقصير)، اليسار واليمين والميراث.

قواعد لرسم العناصر العائمة

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

وهذا ما سيعرضه المتصفح.

مظاهرة لتقديم العناصر العائمة

الآن دعونا معرفة ما حدث. يوضح المثال 4 كتل، يتم رسم المربع 1 والصندوق 2 بواسطة المتصفح بشكل افتراضي، أي في التدفق الطبيعي، وتكون العناصر الداخلية تعويم = اليسار. لجعل المثال أكثر وضوحا، أضفت لون الخلفية والحشوة إلى الكتل. لذلك، في النهاية، تم عرض الكتل الافتراضية (الأولى والرابع) كالمعتاد، كل منها على سطر جديد وتحتل العرض بالكامل( نظرًا لأن هذه لقطة شاشة للعلامة، فإن عرض المربعات يقتصر على عرض الصورة). تم استخراج المربعين العائمين (الثاني والثالث) من التدفق الطبيعي (أي أن المربعين الأول والرابع لا يراهما، لذلك يبدأ "الصندوق العادي 2" أسفل الأول من بداية السطر) ويتم نقله إلى الحد الأيسر من حاوية. وعلى الرغم من أن مربعات الكتل العادية لا ترى مربعات عائمة، فإن المربع المضمن للمربع الأخير (وهذا هو نصه) يرى مربعات عائمة ويتدفق حولها على الجانب الأيمن.
كما ترون، كل شيء يتوافق مع خوارزمية العرض المذكورة أعلاه يطفوعناصر.

كيفية استخدام تعويم

هناك طريقتان رئيسيتان لاستخدام العقار يطفو.
دعونا ننظر إليهم.

التفاف النص حول الصورة.

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

يلتف النص حول الصورة باستخدام float:left

مثال على تخطيط الصفحة مع التفاف النص حول الصورة.

CSS
img.alignleft(تعويم: يسار؛ الهامش: 0 10px 10px 0)

في الكود أعلاه يوجد عنصر عائم imgويكون نص الالتفاف داخل نفس الحاوية ص.
يرجى ملاحظة أنه في أنماط CSS، تتم إضافة الحشو إلى يسار ويمين العنصر العائم. إنها ممارسة شائعة لإضافة مسافة بين الصورة والنص المحيط بها.

تخطيطات العمود

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

لغة البرمجة
‹ معرف القسم = "المجمع" ›
‹معرف div="العمود الأيسر"›‹div›
‹معرف div="العمود الأيمن"›‹/div›
‹/شعبة›

CSS
#العمود الأيسر (العائم: اليسار)
# العمود الأيمن (العائم: اليسار)

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

ونصيحة أخرى. قم دائمًا بتعيين عرض العنصر العائم؛ إذا لم تقم بذلك، فقد يكون لديك عواقب غير مقصودة.

تعطيل خاصية التعويم

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

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

. لكي نكون منصفين، تجدر الإشارة إلى أن هذه التقنية تعتبر صحيحة من الناحية الفنية، ولكنها غير صحيحة لغويا، لأن يظهر فارغًا في المستند شعبةحاوية.

حاوية مع عناصر عائمة

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

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

لغة البرمجة
‹فئة div = "مسح" ›‹/div›

CSS
.واضح (واضح:كلاهما؛)

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

مشاكل مع العوامات

بالإضافة إلى مشكلة الحاوية المنهارة، فإن الخاصية float بها عدد من المشكلات الأخرى.
تحتوي الإصدارات الأقدم من Internet Explorer على خطأ في المسافة البادئة المزدوجة ( هامِش). إذا تم نقل العناصر في نفس الاتجاه وتمت إضافة العناصر أيضًا هامِشفي نفس الاتجاه (يسار/يسار أو يمين/يمين)، يقوم IE بمضاعفة القيمة هامِش. الحل البسيط هو تعيين الخاصية العرض: مضمنةبالنسبة للعنصر العائم، بالمناسبة، تساعد هذه الخاصية على التخلص من أخطاء الحمير الضارة الأخرى. بالإضافة إلى ذلك، يمكنك استخدام التعليقات الشرطية لتعيين تعليقات محددة هامِشلـ IE أو للإصدارات الفردية من IE.
هناك مشكلة أخرى وهي إضافة عناصر داخل عنصر عائم، ويكون عرض العناصر المضافة أكبر من عرض الحاوية. يمكنك على سبيل المثال إضافة صورة داخل عنصر عائم، ويكون عرض الصورة أكبر من عرض الحاوية. اعتمادًا على المتصفح، قد يؤدي ذلك إلى أن يكون العنصر العائم الخاص بك أوسع من المقصود أو أن يتداخل المحتوى مع صورتك. تأكد من أن العناصر الموجودة داخل العنصر العائم لا تتجاوز عرض العنصر العائم.
هناك أيضًا مشكلة في اختفاء الحشوة السفلية ( الهامش السفلي). يمكن تجاهل الحشو السفلي للعنصر العائم داخل العناصر العائمة الأخرى. الحل هو الاستخدام حشوةبدلاً من هامِش، اذا حدث هذا.

ملخص على تعويم

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

• يتم وضع العناصر العائمة في التدفق الطبيعي للمستند، ثم يتم إزاحتها إلى اليسار أو اليمين داخل العنصر الأصلي وفقًا لقيمة التدفق الطبيعي وإزالتها من التدفق الطبيعي للمستند.
• العلامات ذات القيم المحددة يطفوتصبح عناصر الكتلة تلقائيًا.
• صناديق الكتلة المثبتة يطفويتم وضعها بجانب بعضها البعض طالما أن هناك مساحة كافية لهم. إذا لم تكن هناك مساحة كافية في الحاوية، فسوف تظهر أسفل العناصر العائمة.
• عرض الصندوق مع مجموعة الخاصية يطفويتحدد من خلال عرض محتواه. يوصى بضبط العرض على العناصر العائمة عند وضع العلامات، وإلا فقد تكون النتيجة غير متوقعة. لا تنطبق التوصية على الصور، حيث أن العرض ضمني لها.
• تختلف العناصر العائمة والموضعية وتتصرف بشكل مختلف. لا يمكنك استخدام الخصائص يطفوو موضعفي عنصر واحد.
• لإعادة تعيين خاصية الالتفاف للعناصر اللاحقة، استخدم خاصية CSS واضح.
• يطفويتم إخراج الملاكمة من الخيط الرئيسي، لذلك يتم وضع عناصر الكتلة في الخيط العادي كما لو لم تكن موجودة، ولكن الصناديق المضمنة لتلك العناصر تفسح المجال للكتلة العائمة.
• الحاوية التي تحتوي على عناصر عائمة حصريًا يكون ارتفاعها صفرًا، لأن يتم إخراج العناصر العائمة من التدفق الطبيعي، لذلك يعتبرها الوالد فارغة. هناك طرق لمكافحة هذا التأثير دون علامات إضافية، يمكنك التعرف عليها، على سبيل المثال.
• على عكس عناصر التدفق الرئيسية، الحدود العمودية يطفولا تندمج الصناديق مع حدود الكتل المجاورة.
• ابحث عن الحلول التي تناسب احتياجاتك بشكل أفضل لحل المشكلات المتعلقة بعرض العناصر العائمة بشكل صحيح في Internet Explorer.

آمل أن يساعدك هذا في إزالة بعض الالتباس عند استخدام خصائص CSS. يطفو.

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

ما هو تعويم؟

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

إحدى الطرق لإعادة تعيين نوع عائم للعناصر هي استخدام الخاصية float. أحد الأمثلة الكلاسيكية هو استخدام التعويم لمحاذاة الصورة إلى اليسار أو اليمين. إليك كود HTML البسيط للصورة والفقرة:

لوريم إيبسوم...

يتم عرضها على سطر جديد:

أضف بعض CSS إلى الصورة:
img ( تعويم: يمين؛ الهامش: 20 بكسل؛ )

يؤدي هذا إلى المحاذاة الصحيحة:

إذا كان هناك المزيد من النص، فسيتم التفاف الفقرة حول الصورة:

لنفترض أننا بحاجة إلى وضع مسافة بادئة 20 بكسل بين الصورة والنص. لن ينجح هذا البناء: p (الهامش: 20 بكسل؛)

الصحيح هكذا:
img (الهامش: 20 بكسل؛)

لماذا لا تعمل المسافة البادئة للفقرة؟ لمعرفة ذلك، دعونا نضيف الإطار:

P (الحدود: 1 بكسل أسود خالص؛)

قد تفاجئك النتيجة:

اتضح أن الصورة داخل الفقرة! ولهذا السبب لا تعمل خاصية الهامش في الحالة الأولى. لإصلاح ذلك، يمكنك تطبيق float:left على الفقرة وتحديد العرض المطلق:

قواعد تعويم غريبة

دعنا ننتقل إلى الاستخدامات الأكثر تعقيدًا للتعويم: القواعد التي تحكم الكائنات العائمة. قد يكون هذا ضروريًا عند تخطيط معرض الصور. على سبيل المثال:

• 
• 
• 
• 
• 
• 
• 

افتراضيًا، سيظهر كل عنصر في القائمة في سطر جديد. إذا قمت بتطبيق float:left على كل منها، فستصطف الصور مع فاصل أسطر:

لي (تعويم: يسار؛ الهامش: 4 بكسل؛)

ولكن ماذا لو كانت الصور ذات ارتفاعات مختلفة؟

إذا أضفنا عرضًا من سطر واحد إلى عناصر القائمة، فسيبدو أجمل قليلاً:

لي (العرض: مضمن؛)

الآن لنقم بالمحاذاة عموديًا:

Img (محاذاة عمودية: أعلى؛)

ويجب أن نتذكر أنه في حالة ارتفاع الصور بشكل أكبر، فإن الصور المتبقية تلتف حول صورة واحدة فقط سابقة، على سبيل المثال:

مثال على تغيير ترتيب العناصر – مثلاً لدينا قائمة العناصر بالترتيب:

• 
• 
• 
• 
• 
• 

إذا أردنا وضعها بترتيب عكسي، فإننا نستخدم float:right بدلاً من float:left، ولا يتعين علينا تغيير الترتيب في HTML:

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

يبدأ النص الموجود أدناه بالالتفاف حول الكتلة بأكملها:

لتجنب ذلك، يجب عليك استخدام الخاصية Clear. ولو طبقناها على الصورة الثانية:

Ul li:nth-child(2) (واضح: يسار;)

نحصل على هذا:

في هذه الحالة، تستمر الصور المتبقية في وراثة float:left. وبناء على ذلك، سيتم عرض النص بشكل أخرق:

تحتاج إلى تطبيق واضح:كلاهما على الفقرة:

ف (واضح: كلاهما؛)

تم حل مشكلتنا:

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

أول (الخلفية: رمادي؛)

ولكن إذا قمت بتطبيق float:left على عناصر القائمة، فستختفي الخلفية تمامًا:

إذا قمنا بتعيين الارتفاع على UL أولاً:

أول (الارتفاع: 300 بكسل؛)

وهذا أيضاً لا يحل المشكلة، لأن... تم تعيين أبعاد الخلفية بشكل مطلق. سوف تساعدنا فئة Clearfix، والتي سيتم تطبيقها على div على نفس مستوى عناصر UL.

Clearfix (واضح: كلاهما؛)

هناك حل آخر باستخدام الفائض:

أول (تجاوز: تلقائي؛)

تسع قواعد للعناصر العائمة:

1. لا يمكن للعناصر العائمة أن تمتد إلى ما هو أبعد من حافة الحاوية الأصلية الخاصة بها.
2. سيظهر كل عنصر عائم إلى اليمين أو أسفل العنصر السابق باستخدام float:left، أو إلى اليسار وأسفل العنصر السابق باستخدام float:right.
3. لا يمكن للكتلة التي تحتوي على float:left أن تكون أبعد إلى اليمين من الكتلة التي تحتوي على float:right.
4. لا يمكن للعنصر العائم أن يمتد إلى ما هو أبعد من الحد العلوي لحاويته.
5. لا يمكن وضع العنصر العائم أعلى من الكتلة الأصلية أو العنصر العائم السابق.
6. لا يمكن وضع العنصر العائم أعلى من السطر السابق من العناصر المضمنة
7. يجب وضع الكتلة العائمة على أعلى مستوى ممكن.
8. لا يمكن لعنصر عائم يتبع عنصرًا آخر أن يتجاوز الحاوية الخاصة به - فهو يلتف إلى السطر التالي.
9. يجب وضع الكتلة ذات الطفو: اليسار في أقصى اليسار قدر الإمكان، والكتلة ذات الطفو: اليمين يجب وضعها في أقصى اليمين قدر الإمكان.

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

يمكن للمطورين أيضًا استخدام خيارات تنسيق أكثر ملاءمة، مثل Flexbox أو Position لتغيير موقع عنصر ما على الموقع، ولكن أول الأشياء أولاً. أولاً، يجب أن تفهم مزايا وعيوب خاصية Float.

تعويم CSS - لماذا هو مطلوب؟

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

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

وصف خاصية CSS العائمة

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

تحتوي الخاصية Float على أربع قيم:

• تعويم: يرث؛
• تعويم: صحيح؛
• تعويم: اليسار؛
• تعويم: لا شيء؛

بالنسبة لأولئك الذين يعرفون اللغة الإنجليزية، يجب أن تكون قيم معلمات خاصية Float واضحة. ولكن بالنسبة لأولئك الذين لا يعرفون، هنا توضيح بسيط. معامل :غادر؛ينقل جسم العنصر إلى أقصى الزاوية اليسرى للعنصر الأصلي. يحدث الشيء نفسه (فقط في الاتجاه الآخر) مع المعلمة bcgjkmpjdfybb :يمين؛. معنى :يرث؛يخبر العنصر أن يتخذ نفس الإعدادات مثل العنصر الأصلي. تُسمى هذه العناصر أيضًا بالعناصر الفرعية، نظرًا لأنها تقع مباشرةً داخل الأصل في كود html. ملكية :لا أحد؛يسمح للعنصر بعدم تعطيل التدفق الطبيعي للمستند، ويتم تعيينه افتراضيًا لجميع أجزاء التعليمات البرمجية.

كيف يعمل تعويم؟

تعمل خاصية Float CSS بكل بساطة. كل ما تم وصفه أعلاه يمكن القيام به دون صعوبة كبيرة. وبعد ذلك سيكون كل شيء بهذه البساطة. ولكن قبل أن نواصل دراسة خاصية Float، من المفيد أن نفهم القليل من النظرية. كل عنصر في موقع الويب عبارة عن كتلة. يمكنك التحقق من ذلك بسهولة عن طريق فتح وحدة التحكم في Google Chrome بالضغط على Ctrl + Shift + J. سيتم عرض النص والعنوان والصورة والروابط وجميع المكونات الأخرى للموقع في كتل، فقط بأحجام مختلفة. في البداية، كل هذه الكتل تأتي واحدة تلو الأخرى. كما ترون في المثال أدناه، فإن سطور التعليمات البرمجية تتبع بعضها البعض، لذلك سيتم عرضها بدقة واحدًا تلو الآخر.

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

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

وظيفة واضحة لحل المشاكل

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

تحتوي الدالة Clear على خمس قيم:

• :غادر؛
• :يمين؛
• :كلاهما؛
• :يرث؛
• لا أحد؛

وقياسًا على ذلك، يمكنك أن تفهم متى يكون من الأفضل استخدام وظيفة Clear. إذا كان لدينا سطر في الكود تعويم: صحيح؛(المقصود هو رمز CSS)، فيجب أن تكون الوظيفة واضح: صحيح؛. وينطبق الشيء نفسه على الخصائص تعويم: اليسار؛سوف يكمل ذلك واضح: يسار؛. عند كتابة الكود واضحة على حد سواء؛وتبين أن العنصر الذي يتم تطبيق هذه الوظيفة عليه سيكون أسفل العناصر التي يتم تطبيق الدالة Float عليها. يأخذ الوراثة الإعدادات من العنصر الأصلي، ولا يقوم أي شيء بإجراء أي تغييرات على بنية الموقع. من خلال فهم كيفية عمل وظيفتي Float وClear، يمكنك كتابة كود HTML وCSS Float فريد وغير عادي من شأنه أن يجعل موقع الويب الخاص بك فريدًا من نوعه.

استخدام Float لإنشاء الأعمدة

تعد خاصية Float مفيدة بشكل خاص عند إنشاء أعمدة على موقع ويب (أو توسيط محتوى CSS Float على صفحة ويب). هذا الرمز هو الأكثر عملية وملاءمة، لذلك يجدر النظر في عدة خيارات لإنشاء قالب موقع مألوف يتكون من عمودين. على سبيل المثال، لنأخذ موقع ويب قياسي يحتوي على محتوى على اليسار، وشريط تنقل على اليمين، ورأس وتذييل. الكود سيكون هكذا:

الآن نحن بحاجة إلى معرفة ما هو مكتوب هنا. يُسمى العنصر الأصلي، الذي يحتوي على الجزء الرئيسي من كود HTML، بالحاوية. يسمح لك بمنع العناصر التي يتم تطبيق وظيفة Float عليها من التشتت في اتجاهات مختلفة. إذا لم يكن هناك، فإن هذه العناصر سوف تطفو على حدود المتصفح.

بعد ذلك، يوجد في الكود #المحتوى و#التنقل. يتم تطبيق الدالة Float على هذه العناصر. يذهب #المحتوى إلى اليسار و #التنقل إلى اليمين. يعد ذلك ضروريًا لإنشاء موقع مكون من عمودين. من الضروري تحديد العرض حتى لا تتداخل الكائنات مع بعضها البعض. يمكن أيضًا تحديد العرض كنسبة مئوية. وهذا أكثر ملاءمة من البكسل. على سبيل المثال، 45% للمحتوى و45% للتنقل، و10% المتبقية لخاصية الهامش.

الخاصية Clear، الموجودة في #التذييل، تمنع التذييل من متابعة #التنقل و #المحتوى، ولكنها تتركه في نفس المكان الذي كان فيه. ماذا يمكن أن يحدث؟ إذا لم تحدد خاصية Clear؟ في هذا الكود، سيصعد #footer ببساطة وينتهي تحت #navigation. سيحدث هذا لأن #navigation به مساحة كافية لاستيعاب عنصر آخر. يوضح هذا المثال المرئي بوضوح كيف تكمل خصائص Clear وFloat بعضها البعض.

المشاكل التي قد تواجهك عند كتابة التعليمات البرمجية

الأمثلة المذكورة أعلاه بسيطة للغاية. ولكن يمكن أن تنشأ مشاكل معهم أيضا. بشكل عام، في الواقع، يمكن أن تحدث الكثير من المشاكل غير المتوقعة مع وظيفة Float. بغض النظر عن مدى غرابة الأمر، عادة ما تنشأ المشاكل ليس مع CSS، ولكن مع كود HTML. يؤثر المكان الذي يوجد فيه العنصر الذي يحتوي على وظيفة Float في كود html بشكل مباشر على تشغيل الأخير. لتجنب أنواع مختلفة من الصعوبات، من الأفضل الالتزام بقاعدة بسيطة - ضع العناصر التي تحتوي على وظيفة Float أولاً في التعليمات البرمجية. يعمل هذا دائمًا تقريبًا ويقلل من سلوكهم غير المتوقع.

تصادم العناصر

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

نظرًا لأن هذه العناصر تكون في البداية في حالة تدفق عادي ثم يتم تعطيلها بواسطة الخاصية Float، فقد يقوم المتصفح بإزالتها من صفحة الموقع. ومع ذلك، لا تيأس، لأن الحل بسيط وواضح - استخدم خاصية Cear. من الممكن أن يكون استخدام Clear هو الأكثر فعالية من بين جميع الطرق للخروج من هذه المشكلة.

ولكن يمكن حل مشكلة تصادم عناصر صفحة الويب بطريقة أخرى. هناك طريقتان أخريان على الأقل:

• باستخدام وظيفة الوظيفة؛
• باستخدام فليكس بوكس.

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

تحليل رمز وظيفة الموضع والتعويم

يجدر إلقاء نظرة فاحصة على كيفية استبدال Float بالموضع في كود HTML وCSS. انها في الواقع بسيطة جدا. لنفترض أن هناك #حاوية وعنصر #div.

في هذا المثال، سيساعد استخدام الدالة Float (CSS Div) في الحاوية الثانية في إنشاء موقع قياسي مكون من عمودين. لا تنس أبدًا وظيفة Clear. وبدون ذلك، سوف تحصل فقط على العناصر المتراكبة على بعضها البعض.

إذًا كيف يمكنك تغيير كود CSS وFloat الخاص بك لاستخدام Postion؟ بسيط جدا:

الموقف:نسبي؛

الموقف:نسبي؛

في هذه الحالة، سيأخذ #container و #div الموقع الذي يحتاجه المطور في العنصر الأصلي. رئيسي؟ ضع #div و #container في عنصر رئيسي واحد يطابق أحجامهما.

Flexbox - كيف ستساعد هذه الميزة في استبدال CSS Float؟

تعد Flexbox هي الطريقة الأكثر تقدمًا لإنشاء مواقع الويب في الوقت الحالي، لذا فإن هذه الميزة غير مدعومة في الإصدارات القديمة من المتصفحات. لا ينبغي استبعاد هذه الحقيقة، لأن المستخدمين الذين لديهم إصدارات قديمة من المتصفحات لن يتمكنوا من رؤية الإصدار الصحيح من الموقع.

Flexbox ليس خاصية، بل وحدة منفصلة. ولذلك، يدعم flexbox عددًا من الخصائص التي تعمل معه فقط. بالإضافة إلى ذلك، فإن وظيفة العرض، التي تحتوي على ثلاث معلمات مضمنة وكتلة وكتلة مضمنة في flexbox، لم يتبق لها سوى تدفق مرن واحد.

كيف يعمل فليكس بوكس؟

ستساعد هذه التقنية المطور على محاذاة العناصر أفقيًا وعموديًا بسهولة. يمكن لـ Flexbox أيضًا تغيير الاتجاه والترتيب الذي يتم به عرض العناصر. تحتوي هذه التقنية على محورين: المحور الرئيسي والمحور المتقاطع، حيث يتم بناء جهاز Flexbox بأكمله حولهما. كما أنه يزيل تأثير وظيفتي Float وClear. إنه يبني نظامه بالكود، حيث يستخدم خصائص فريدة خاصة به، لذلك، لسوء الحظ، لن يكون من الممكن تكرار خصائص أخرى، مثل Float وPosition، في العناصر. وهذا من شأنه أن يكون مفيدا للغاية، لأنه، كما ذكرنا أعلاه، يعمل Flexbox فقط في الإصدارات الجديدة من المتصفحات.

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

خطأ الهامش المزدوج

ومع ذلك، في بعض الأحيان، لسوء الحظ، يواجه كل مطور مشكلات لا تتعلق بالكود المكتوب، ولكن بالأخطاء الموجودة في نوع معين من المتصفحات. على سبيل المثال، يوجد خطأ في Internet Explorer يسمى خطأ الهامش المزدوج. يقوم بضرب معلمة Margin في اثنين، مما يؤدي إلى إزاحة عناصر الموقع إلى خارج حدود المتصفح. لتجنب ذلك، ما عليك سوى تحديد معلمة الهامش كنسبة مئوية. عادةً ما يحدث هذا الخطأ عندما تتطابق قيم خصائص Margin وFloat.

الهامش الأيسر: 10 بكسل؛

سيؤدي هذا الرمز إلى نقل العنصر في Internet Explorer 20 بيكسل إلى اليسار. يمكنك تغيير الكود مثل هذا:

الهامش الأيسر:10%;

أو هكذا،

الهامش الأيمن: 10 بكسل؛

كلا الخيارين سوف يحل مشكلة إزاحة العنصر.

أخطاء في المتصفح وعرض غير صحيح للموقع

ومن الجدير بالذكر أن Internet Explorer ليس المتصفح الوحيد الذي يمكن أن تحدث فيه الأخطاء. تعرض الإصدارات الأقدم من Google Chrome وMozilla أيضًا بعض عناصر مواقع الويب الحديثة بشكل غير صحيح. لكل من هذه الأخطاء، يمكن العثور على حل. بشكل عام، أود أن أشير إلى أن استخدام Float سيؤدي إلى إنشاء تصميم موقع ويب أصلي وجذاب. سيساعدك فهم الأساسيات ومبادئ التشغيل لهذه الخاصية على تجنب الأخطاء وجعل الحياة أسهل لأي مطور.