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

ما هو "تعويم"؟

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

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

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

تعيين خاصية يطفوللعناصر ذات باستخدام CSSيبدو مثل هذا:

#الشريط الجانبي ( تعويم: يمين؛ )

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

ما هو تعويم المستخدمة ل؟

بعيدًا عن المثال البسيط المتمثل في التفاف النص حول الصورة، يطفويمكن استخدامها لإنشاء تخطيطات الويب.

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

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

إعادة تعيين التفاف

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

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

#تذييل (واضح: كلاهما؛)

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

انهيار عظيم

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

لكن البديل لمثل هذا الانهيار أسوأ. خذ بعين الاعتبار السيناريو التالي:

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

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

تقنيات إلغاء التغليف

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

طريقة الكتلة الفارغة.

إنها حرفيًا كتلة فارغة.

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

طريقة الفائض.

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

طريقة تنظيف سهلة .

يستخدم محدد CSS الزائف (:after) لإزالة التغليف. بدلا من استخدام العقار تجاوزبالنسبة للعنصر الأصلي، قم بتعيين فئة إضافية له، على سبيل المثال "clearfix" واستخدم نمط CSS التالي:

Clearfix: بعد (المحتوى: "."؛ الرؤية: مخفي؛ العرض: كتلة؛ الارتفاع: 0؛ واضح: كلاهما؛)

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

تتطلب المواقف المختلفة طرقًا مختلفة لتخفيف الخدعة. لنأخذ كمثال شبكة من أنواع مختلفة من الكتل.

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

مشاكل مع العناصر العائمة

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

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

الحل السريعمشاكل: استخدام الفائض: مخفي؛

لتقليم الزائدة.خطأ في الهامش المزدوج يطفو- شيء آخر يجب تذكره عند العمل مع IE6. يتم التعبير عن هذا الخطأ في حقيقة أنه إذا كان الحقل على نفس الجانب الذي يتم توجيهه إليه

، يتم مضاعفة الحقل. على سبيل المثال: سندخل الحقل الأيسر 40 بكسل .، بدلاً من.

20 بكسلحل سريع للمشكلة

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

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

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

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

بناء الجملة

تعويم: يسار | حق | لا شيء | يرث

قيم

left يقوم بمحاذاة العنصر إلى اليسار، وتتدفق كافة العناصر الأخرى، مثل النص، حوله إلى اليمين.

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

يطفو Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem Nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis at vero eros et Accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

نتيجة

هذا المثال

يظهر في الشكل. 1.

أرز. 1. استخدام خاصية التعويم

نموذج الكائن

document.getElementById("elementID").style.styleFloat document.getElementById("elementID").style.cssFloatالمتصفحات

في

متصفح الانترنت

يحتوي Explorer 6 على خطأ يتعلق بمضاعفة قيمة الحشو اليسرى أو اليمنى للعناصر العائمة المتداخلة داخل العناصر الأصلية. يتم مضاعفة الهامش المجاور لجانب الوالدين. عادةً ما يتم حل المشكلة عن طريق إضافة العرض: سطريًا إلى العنصر العائم. يضيف هذا المتصفح أيضًا حشوة بحجم 3 بكسل (ما يسمى بـ "خطأ ثلاثي البكسل") في الاتجاه المحدد بواسطة القيمة العائمة. إصدارات Internet Explorer حتى 7.0 لا تدعم القيمة الموروثة.تعد خاصية Float أحد الأصول الهامة والقوية لمطوري الويب الذين يعملون مع HTML وCSS. من ناحية أخرى، قد يكون الأمر محبطًا ومربكًا إذا لم تفهم تمامًا كيفية عمل هذه الخاصية.

ترجمة المقال يطفو CSS يطفو 101 . موقع alistapart.com الأصليأيضًا، في الماضي، نظرًا لوجود بعض الأخطاء السيئة جدًا في المتصفح، كان من الطبيعي أن تشعر بالتوتر عند استخدام الخاصية

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

تعريف تعويم

لنبدأ بتحديد ما هو يطفو.

Float هو مربع يتحرك يمينًا أو يسارًا على طول الخط الحالي. الميزة الأكثر إثارة للاهتمام في العوامة هي أن المحتوى يمكن أن يتدفق على طول جانبه. عند تطبيق خاصية float: left، سوف يتدفق المحتوى إلى أسفل الصندوق على الجانب الأيمن، وبالمثل مع float: right - down على الجانب الأيسر.

تحتوي الخاصية float على 4 قيم يمكننا تطبيقها: left و right و inherin و none. كل معنى واضح جدا. على سبيل المثال، إذا كنت تستخدم float: left على عنصر ما، فسوف ينتقل إلى الحد الأقصى الأيسر بالنسبة للعنصر الأصلي الخاص به. وإذا حددت float: right، فسينتقل العنصر بالمثل إلى اليمين. تخبر القيمة ihnerit العنصر بوراثة الخاصية من العنصر الأصلي. والقيمة الأخيرة none هي القيمة الافتراضية وتقول عدم تطبيق الخاصية يطفوإلى هذا العنصر.

#container ( العرض: 960 بكسل; الهامش: 0 تلقائي; ) #content ( float: يسار; العرض: 660 بكسل; الخلفية: #fff; ) #navigation ( float: right; width: 300px; الخلفية: #eee; ) #footer ( واضح: كلاهما الخلفية: #aaa؛ الحشو: 10 بكسل)

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

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

تطفو أولا

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

لدينا هنا كتلة صغيرة تحتوي على صورة بها خاصية float:right والنص المحيط بها. يبدو CSS الخاص بنا كما يلي:

#container ( العرض: 280 بكسل؛ الهامش: 0 تلقائي؛ الحشو: 10 بكسل؛ الخلفية: #aaa؛ الحدود: 1 بكسل صلب #999؛ ) img ( float: right; )

يتميز عنصر #container الأصلي الخاص بنا بعرض ضيق ويحافظ على العنصر العائم (الصورة) داخل حدوده. يبدو رمز HTML الخاص بنا كما يلي:

هذا المثال يعطينا النتيجة المرجوة، ولكن ماذا لو أخذنا وأعدنا ترتيب بعض العناصر في HTML؟ في المثال انتقلت بعد النص

نتيجتنا ليست ما كان متوقعا. لقد انتقلت صورتنا إلى اليمين، لكنها لم تعد في الزاوية العليا كما نريد، بل سقطت أسفل الفقرة؛ والأسوأ من ذلك أنه يبرز من أسفل عنصر #container الأصلي. ماذا يحدث؟

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

ثانيًا. السبب وراء ظهور الصورة من أسفل كتلة #container الخاصة بنا يرجع إلى شيء يسمى الانهيار. دعونا نتحدث عن الانهيار والحلول.

الانهيار

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

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

#container ( تجاوز السعة: مخفي؛ العرض: 260 بكسل؛ الهامش: 0 تلقائي؛ الحشو: 10 بكسل 0 10 بكسل 10 بكسل؛ الخلفية: #aaa؛ الحد: 1 بكسل صلب #999؛)

وأخيرا، إريك مايريشرح الحل الثالث لهذه المشكلة في مقالته التي تحتوي على العوامات. وفقًا لمواصفات CSS 2.1:

سيؤدي العنصر ذو الخاصية float إلى توسيع حدوده لتشمل العناصر العائمة بداخله.

لذلك، من خلال تطبيق الخاصية float على #container، ستحتوي حاويتنا على الصورة والفقرة، على غرار الطرق الموضحة أعلاه.

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

خاتمة

باستخدام الخاصية float، يمكنك تحسين أسلوبك في ترتيب العناصر بشكل كبير. إن فهم كيفية عمل خاصية معينة وما يؤثر على سلوكها سيمنحك أساسًا متينًا لاستخدام التعويم بفعالية.

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

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

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

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

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

بدلاً من الكتلة العائمة ذات المحتوى النصي، يمكنك إنشاء صورة عائمة. في هذه الحالة، سوف يلتف النص حول الصورة:

باستخدام خصائص CSSتعويم تم جعل الصورة تطفو على الجانب الأيسر.

سيتم التفاف النص الموجود في كود HTML الموجود أسفل الصورة حول الصورة على الجانبين الأيمن والسفلي.

يحاول "

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

1. ممكن بالطرق التالية:
2. قم بتعيين ارتفاع ثابت - في الحالات التي تعرف فيها الارتفاع الذي يجب أن يكون عليه الحاوية.

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

لذلك إذا تم تطبيق الخاصية float على عناصر من نوع آخر، فسيتم تحويلها إلى نوع كتلة.

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

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

بناء الجملة

تعويم: يسار | حق | لا شيء | يرث

قيم

left يقوم بمحاذاة العنصر إلى اليسار، وتتدفق كافة العناصر الأخرى، مثل النص، حوله إلى اليمين.

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

ملحوظة: العناصر المطلقة والثابتة تتجاهل الخاصية float. كما أن الخاصية float ليس لها أي تأثير على الصناديق المرنة.

نتيجة

هذا المثال

يظهر في الشكل. 1.

أرز. 1. استخدام خاصية التعويم

نموذج الكائن

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

في