التعويم والمسح (تخطيط قديم)

مقدمة في التعويم في CSS

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

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

الغرض الأصلي من التعويم

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

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

<div class="article">
    <img src="photo.jpg" alt="منظر طبيعي جميل" class="float-left">
    <p>هذا نص توضيحي يمثل محتوى المقال. سيلتف هذا النص حول الصورة
    المعوّمة إلى اليسار. يمكنك أن ترى كيف يتدفق النص بشكل طبيعي
    حول الصورة، مما يخلق تخطيطاً يشبه المجلات. هذا هو الاستخدام
    الأمثل والأصلي لخاصية التعويم في CSS.</p>
</div>

.float-left {
    float: left;
    margin: 0 20px 10px 0;
    max-width: 300px;
}

.article {
    font-size: 16px;
    line-height: 1.6;
}

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

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

تقبل خاصية float أربع قيم، كل منها يتحكم في مكان وضع العنصر بالنسبة لحاويته:

/* تعويم العنصر إلى الجانب الأيسر من حاويته */
.element-left {
    float: left;
}

/* تعويم العنصر إلى الجانب الأيمن من حاويته */
.element-right {
    float: right;
}

/* إزالة أي تعويم من العنصر (القيمة الافتراضية) */
.element-none {
    float: none;
}

/* التعويم إلى بداية الاتجاه السطري (خاصية منطقية) */
.element-start {
    float: inline-start;
}

/* التعويم إلى نهاية الاتجاه السطري (خاصية منطقية) */
.element-end {
    float: inline-end;
}

float: left

عندما تطبق float: left على عنصر، يتم إخراج العنصر من التدفق الطبيعي للمستند ودفعه إلى الحافة اليسرى لكتلة الاحتواء. أي محتوى يتبع العنصر المُعوَّم سيتدفق حول جانبه الأيمن. العناصر المتعددة المُعوَّمة لليسار ستتراص أفقياً من اليسار إلى اليمين، وتنتقل إلى السطر التالي إذا لم تكن هناك مساحة أفقية كافية.

float: right

تعمل قيمة float: right بشكل مطابق لـ float: left ولكن في الاتجاه المعاكس. يتم دفع العنصر إلى الحافة اليمنى لكتلة الاحتواء، ويتدفق المحتوى التالي حول جانبه الأيسر. العناصر المتعددة المُعوَّمة لليمين تتراص من اليمين إلى اليسار.

float: none

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

كيف يُخرج التعويم العناصر من التدفق الطبيعي

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

في التدفق الطبيعي للمستند، تتراص العناصر الكتلية عمودياً واحداً فوق الآخر، وتتدفق العناصر السطرية أفقياً داخل حاويتها. عندما تُعوّم عنصراً، يتم رفعه من ترتيب التراص الطبيعي هذا. العنصر المُعوَّم لا يزال يشغل مساحة بصرياً -- سيلتف النص والعناصر السطرية حوله -- لكن العناصر الكتلية خلف التعويم تتصرف كما لو أن العنصر المُعوَّم غير موجود.

<div class="container">
    <div class="box floated">أنا مُعوَّم لليسار</div>
    <div class="box normal">أنا عنصر كتلي عادي. خلفيتي تمتد خلف
    العنصر المُعوَّم لأنني لا "أراه" في التدفق الطبيعي. ومع ذلك،
    محتوى النص الخاص بي يلتف حول التعويم.</div>
</div>

.floated {
    float: left;
    width: 150px;
    height: 150px;
    background: #3498db;
    color: white;
    padding: 10px;
}

.normal {
    background: #e74c3c;
    color: white;
    padding: 10px;
}

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

خاصية المسح (Clear)

خاصية clear هي المرافقة لـ float. تُستخدم على العناصر التي لا يجب أن تلتف حول العناصر المُعوَّمة. عندما تطبق clear على عنصر، فأنت تخبر المتصفح: "هذا العنصر يجب أن يُوضع أسفل أي عناصر معوّمة سابقة، وليس بجانبها."

/* لا تسمح بالعناصر المُعوَّمة على الجانب الأيسر */
.clear-left {
    clear: left;
}

/* لا تسمح بالعناصر المُعوَّمة على الجانب الأيمن */
.clear-right {
    clear: right;
}

/* لا تسمح بالعناصر المُعوَّمة على أي جانب */
.clear-both {
    clear: both;
}

/* الافتراضي -- يسمح بالعناصر المُعوَّمة على كلا الجانبين */
.clear-none {
    clear: none;
}

clear: left

يتم نقل العنصر أسفل أي عناصر مُعوَّمة لليسار سابقة. سيمسح فقط العناصر المُعوَّمة لليسار، لذا يمكن أن تظهر العناصر المُعوَّمة لليمين بجانبه.

clear: right

يتم نقل العنصر أسفل أي عناصر مُعوَّمة لليمين سابقة. يمكن أن تظهر العناصر المُعوَّمة لليسار بجانبه.

clear: both

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

<div class="container">
    <img src="photo1.jpg" class="float-left">
    <p>هذا النص يلتف حول الصورة على الجانب الأيمن.</p>

    <div class="clear-both"></div>

    <img src="photo2.jpg" class="float-right">
    <p>هذا النص يلتف حول الصورة الثانية على الجانب الأيسر.</p>
</div>

.float-left {
    float: left;
    margin: 0 15px 10px 0;
    max-width: 250px;
}

.float-right {
    float: right;
    margin: 0 0 10px 15px;
    max-width: 250px;
}

.clear-both {
    clear: both;
}

يعمل عنصر div الفارغ مع clear: both كفاصل. كل شيء بعده يبدأ من جديد، أسفل جميع العناصر المُعوَّمة السابقة. بينما يُعتبر استخدام عنصر فارغ للمسح حيلة (سنرى حلولاً أفضل قريباً)، إلا أنه يوضح كيف تعمل خاصية المسح.

مشكلة انهيار الحاوية الأم

أشهر مشكلة في تعويم CSS هي انهيار الحاوية الأم. عندما تكون جميع عناصر حاوية ما مُعوَّمة، تنهار الحاوية إلى ارتفاع صفر لأنها لا تحتوي على محتوى في التدفق الطبيعي لتحديد ارتفاعها. العنصر الأم يتجاهل فعلياً وجود أبنائه.

<div class="parent">
    <div class="child" style="float: left; width: 50%;">العمود 1</div>
    <div class="child" style="float: left; width: 50%;">العمود 2</div>
</div>
<p>هذه الفقرة تظهر مباشرة بعد div الأم.</p>

.parent {
    background: #f0f0f0;
    border: 2px solid #333;
    padding: 10px;
    /* هذه الحاوية سيكون ارتفاعها صفر! */
}

.child {
    background: #3498db;
    color: white;
    padding: 20px;
    box-sizing: border-box;
}

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

حيلة Clearfix وتطورها

كانت مشكلة انهيار الحاوية الأم شائعة ومحبطة لدرجة أن مجتمع CSS ابتكر تقنية تُعرف بـ حيلة clearfix. هذه التقنية تجبر الحاوية الأم على الاعتراف بأبنائها المُعوَّمين والتوسع لاحتوائهم. مرت تقنية clearfix بعدة تكرارات على مر السنين.

الحل 1: طريقة العنصر الفارغ (الأقدم)

كان أبسط حل (وأقذره) هو إضافة عنصر فارغ في نهاية الحاوية مع clear: both:

<div class="parent">
    <div class="child" style="float: left;">العمود 1</div>
    <div class="child" style="float: left;">العمود 2</div>
    <div style="clear: both;"></div>
</div>

هذا يعمل، لكنه يضيف HTML بلا معنى إلى المستند. ينتهك مبدأ فصل الاهتمامات لأنك تضيف عناصر بنيوية لأغراض بصرية فقط.

الحل 2: طريقة overflow

تعيين overflow: hidden أو overflow: auto على الحاوية الأم يُنشئ سياق تنسيق كتلي (Block Formatting Context) جديد، مما يجبر الحاوية على احتواء أبنائها المُعوَّمين:

.parent {
    overflow: hidden; /* أو overflow: auto */
    background: #f0f0f0;
    border: 2px solid #333;
}

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

الحل 3: Micro Clearfix (الأكثر شعبية)

تقنية micro clearfix، التي نشرها Nicolas Gallagher، تستخدم العنصر الزائف ::after لإدراج عنصر مسح دون أي HTML إضافي:

/* micro clearfix الكلاسيكي */
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

/* لدعم IE 6/7 (نادراً ما يكون مطلوباً اليوم) */
.clearfix {
    *zoom: 1;
}

تولّد هذه التقنية عناصر زائفة غير مرئية قبل وبعد محتوى الحاوية. العنصر الزائف ::after لديه clear: both، مما يجبر الحاوية الأم على التمدد لتتجاوز جميع الأبناء المُعوَّمين. display: table يُنشئ سياق تنسيق كتلي جديد ويمنع انهيار الهوامش. العنصر الزائف ::before يمنع انهيار الهامش العلوي للابن الأول.

<div class="parent clearfix">
    <div class="child" style="float: left; width: 50%;">العمود 1</div>
    <div class="child" style="float: left; width: 50%;">العمود 2</div>
</div>
<!-- الآن الحاوية الأم تلتف حول أبنائها بشكل صحيح -->

الحل 4: display: flow-root (المعيار الحديث)

الحل الحديث والأنظف هو display: flow-root. صُممت هذه الخاصية خصيصاً لحل مشكلة انهيار الحاوية الأم. تُنشئ سياق تنسيق كتلي جديد دون أي آثار جانبية:

.parent {
    display: flow-root;
    background: #f0f0f0;
    border: 2px solid #333;
    padding: 10px;
}

مع display: flow-root، تحتوي الحاوية الأم تلقائياً أبناءها المُعوَّمين. لا حاجة لحيل clearfix، ولا مشاكل overflow، ولا HTML إضافي. يتصرف العنصر كعنصر على مستوى الكتلة بكل طريقة أخرى. هذا هو النهج الموصى به لأي مشروع لا يحتاج لدعم المتصفحات القديمة جداً.

تخطيطات قائمة على التعويم (سياق تاريخي)

قبل أن يكون Flexbox (2012) و CSS Grid (2017) مدعومين على نطاق واسع، كان التعويم الأداة الأساسية لإنشاء تخطيطات صفحات متعددة الأعمدة. استخدم المطورون التعويم لوضع الأشرطة الجانبية، وإنشاء شبكات أعمدة، وبناء أشرطة تنقل، وهيكلة قوالب صفحات كاملة. لم يكن هذا ما صُمم التعويم من أجله أبداً، وتطلب العديد من الحلول البديلة والحيل.

تخطيط من عمودين باستخدام التعويم

<div class="page-layout clearfix">
    <main class="main-content">
        <h1>منطقة المحتوى الرئيسي</h1>
        <p>هذا هو المحتوى الأساسي للصفحة...</p>
    </main>
    <aside class="sidebar">
        <h2>الشريط الجانبي</h2>
        <ul>
            <li>رابط 1</li>
            <li>رابط 2</li>
            <li>رابط 3</li>
        </ul>
    </aside>
</div>

.page-layout {
    max-width: 1200px;
    margin: 0 auto;
}

.main-content {
    float: left;
    width: 70%;
    padding-right: 30px;
    box-sizing: border-box;
}

.sidebar {
    float: right;
    width: 30%;
    padding-left: 20px;
    box-sizing: border-box;
}

/* Clearfix لحاوية التخطيط */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

تخطيط من ثلاثة أعمدة بالتعويم

.left-sidebar {
    float: left;
    width: 20%;
}

.main-content {
    float: left;
    width: 60%;
    padding: 0 20px;
    box-sizing: border-box;
}

.right-sidebar {
    float: right;
    width: 20%;
}

تنقل أفقي بالتعويم

<nav class="main-nav clearfix">
    <ul>
        <li><a href="/">الرئيسية</a></li>
        <li><a href="/about">حول</a></li>
        <li><a href="/services">الخدمات</a></li>
        <li><a href="/contact">اتصل بنا</a></li>
    </ul>
</nav>

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav li {
    float: left;
}

.main-nav a {
    display: block;
    padding: 10px 20px;
    color: white;
    background: #2c3e50;
    text-decoration: none;
}

.main-nav a:hover {
    background: #34495e;
}

مشاكل تخطيطات التعويم

بينما تعمل التخطيطات القائمة على التعويم تقنياً، إلا أنها جاءت بمشاكل كبيرة جعلت صيانتها مؤلمة:

• كان من المستحيل الحصول على أعمدة متساوية الارتفاع -- الأعمدة المُعوَّمة مستقلة عن بعضها البعض. إذا كان المحتوى الرئيسي بارتفاع 500px والشريط الجانبي بارتفاع 200px، سيكون الشريط الجانبي أقصر. استخدم المطورون حيلاً مثل الأعمدة الزائفة (صور الخلفية) أو JavaScript لمحاكاة الارتفاعات المتساوية.
• كان التوسيط العمودي صعباً للغاية -- لا يوفر التعويم أي آلية لتوسيط المحتوى عمودياً. لجأ المطورون إلى حيل الحشو، وحيل line-height، أو عرض خلايا الجدول.
• كان ترتيب المصدر مرتبطاً بالترتيب البصري -- كان ترتيب ظهور العناصر في HTML يجب أن يتطابق (تقريباً) مع موقعها البصري على الصفحة. إعادة ترتيب التخطيط لأحجام شاشات مختلفة تتطلب هياكل HTML مختلفة أو مجموعات تعويم/مسح معقدة.
• تخطيطات هشة -- إضافة بضعة بكسلات من الحشو أو الحدود يمكن أن تكسر التخطيط بالكامل لأن العروض المئوية لم تكن تأخذ في الاعتبار الحشو والحدود (قبل أن يصبح box-sizing: border-box معياراً).
• متطلبات Clearfix -- كل حاوية بها أبناء مُعوَّمين تحتاج إلى clearfix، مما يضيف تعقيداً واحتمالاً للأخطاء.
• لا تحكم في الفجوات -- لم تكن هناك طريقة مدمجة لإضافة فجوات متسقة بين الأعمدة المُعوَّمة. استخدم المطورون الهوامش والحشو، مما تطلب حسابات دقيقة.

لماذا حلّ Flexbox و Grid محل تخطيطات التعويم

يحل Flexbox و CSS Grid كل مشكلة كانت في تخطيطات التعويم، بالإضافة إلى توفير إمكانيات كانت مستحيلة ببساطة مع التعويم:

/* عمودان بالتعويم (هش) */
.container-float {
    overflow: hidden; /* clearfix */
}
.container-float .main {
    float: left;
    width: 70%;
    padding-right: 20px;
    box-sizing: border-box;
}
.container-float .sidebar {
    float: right;
    width: 30%;
}

/* عمودان بـ Flexbox (متين) */
.container-flex {
    display: flex;
    gap: 20px;
}
.container-flex .main {
    flex: 7;
}
.container-flex .sidebar {
    flex: 3;
}

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

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

على الرغم من استبداله لأغراض التخطيط، يظل التعويم ذا صلة ومفيداً في سيناريوهات محددة:

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

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

.article-image-left {
    float: left;
    margin: 0 20px 15px 0;
    max-width: 40%;
    border-radius: 8px;
}

.article-image-right {
    float: right;
    margin: 0 0 15px 20px;
    max-width: 40%;
    border-radius: 8px;
}

2. الحرف الاستهلالي الكبير (Drop Caps)

تعويم الحرف الأول من فقرة لإنشاء تأثير حرف استهلالي كبير زخرفي:

.article p::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    padding: 4px 8px 0 0;
    font-weight: bold;
    color: #2c3e50;
    font-family: Georgia, serif;
}

3. الاقتباسات المسحوبة

إنشاء اقتباسات مسحوبة تجلس ضمن تدفق النص، مع التفاف نص المقال حولها:

.pull-quote {
    float: right;
    width: 40%;
    margin: 0 0 15px 25px;
    padding: 15px 20px;
    border-left: 4px solid #3498db;
    font-size: 1.3em;
    font-style: italic;
    color: #555;
}

shape-outside: التفاف نص إبداعي

خاصية shape-outside هي ميزة CSS حديثة تعمل حصرياً مع العناصر المُعوَّمة. تتيح لك تحديد شكل مخصص يلتف حوله النص، بدلاً من الالتفاف حول المربع المحيط المستطيل للتعويم. هذا يمكّن من إنشاء تخطيطات نصية جميلة بجودة المجلات كانت مستحيلة سابقاً مع CSS وحده.

/* التفاف نص دائري */
.circular-image {
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    shape-outside: circle(50%);
    margin: 0 20px 10px 0;
}

/* التفاف نص بيضاوي */
.ellipse-wrap {
    float: left;
    width: 200px;
    height: 300px;
    shape-outside: ellipse(50% 50%);
    clip-path: ellipse(50% 50%);
    margin-right: 15px;
}

/* التفاف نص مضلع */
.diamond-wrap {
    float: left;
    width: 200px;
    height: 200px;
    shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    margin-right: 15px;
}

/* مستطيل مدور */
.rounded-wrap {
    float: left;
    width: 200px;
    height: 200px;
    shape-outside: inset(0 round 20px);
    margin-right: 15px;
}

shape-outside مع الصور

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

/* النص يلتف حول الشكل الفعلي لصورة PNG */
.shaped-image {
    float: left;
    width: 250px;
    shape-outside: url('transparent-shape.png');
    shape-margin: 15px;
    shape-image-threshold: 0.5;
}

/* shape-margin تضيف مساحة بين الشكل والنص */
/* shape-image-threshold تحدد مستوى الشفافية
   الذي يعرّف حدود الشكل (من 0 إلى 1) */

مثال عملي: تخطيط مقال بأسلوب المجلات

دعنا نبني تخطيط مقال كامل بأسلوب المجلات يستخدم التعويم لغرضه المقصود -- التفاف النص -- مع تقنيات حديثة للهيكل العام:

<article class="magazine-article">
    <h1>فن تصوير الجبال</h1>

    <img src="hero-mountain.jpg" alt="منظر جبلي"
         class="article-hero-image">

    <p class="intro">يتطلب تصوير الجبال الصبر والمهارة وتقديراً عميقاً
    للمزاج المتغير باستمرار للطبيعة. في هذا الدليل، نستكشف التقنيات
    التي يستخدمها المصورون المحترفون لالتقاط مشاهد جبال الألب الخلابة.</p>

    <h2>العثور على الضوء المثالي</h2>

    <img src="golden-hour.jpg" alt="الساعة الذهبية في الجبال"
         class="float-left rounded">

    <p>الساعة الذهبية -- تلك الفترة السحرية بعد شروق الشمس مباشرة أو قبل
    غروبها -- هي عندما تنبض الجبال حقاً بالألوان. الزاوية المنخفضة للشمس
    تخلق ظلالاً درامية تبرز الملمس الوعر لواجهات الصخور وخطوط القمم.</p>

    <blockquote class="pull-quote-right">
        &ldquo;الجبل لا يهتم بإعدادات كاميرتك. يهتم فقط
        بأنك كنت هناك لتشهد الضوء.&rdquo;
    </blockquote>

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

.magazine-article {
    max-width: 800px;
    margin: 0 auto;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
}

.magazine-article h1 {
    font-size: 2.5em;
    line-height: 1.2;
    margin-bottom: 20px;
}

.article-hero-image {
    width: 100%;
    height: auto;
    margin-bottom: 25px;
    border-radius: 4px;
}

.magazine-article .intro {
    font-size: 1.15em;
    color: #555;
    border-left: 3px solid #3498db;
    padding-left: 20px;
    margin-bottom: 30px;
}

/* التفاف النص بالتعويم */
.float-left {
    float: left;
    max-width: 45%;
    margin: 5px 25px 15px 0;
}

.float-left.rounded {
    border-radius: 8px;
    shape-outside: inset(0 round 8px);
}

/* اقتباس مسحوب بالتعويم */
.pull-quote-right {
    float: right;
    width: 35%;
    margin: 5px 0 15px 30px;
    padding: 15px;
    border-right: 4px solid #e74c3c;
    font-size: 1.2em;
    font-style: italic;
    color: #666;
    line-height: 1.5;
}

/* التأكد من احتواء المقال لجميع العناصر المُعوَّمة */
.magazine-article {
    display: flow-root;
}

مثال عملي: معرض صور قائم على التعويم

بينما ستستخدم CSS Grid أو Flexbox لمعارض الصور اليوم، فإن فهم النهج القائم على التعويم يساعدك في صيانة الشيفرة القديمة:

<div class="gallery clearfix">
    <div class="gallery-item">
        <img src="photo1.jpg" alt="صورة 1">
        <p>شروق الجبل</p>
    </div>
    <div class="gallery-item">
        <img src="photo2.jpg" alt="صورة 2">
        <p>مسار الغابة</p>
    </div>
    <div class="gallery-item">
        <img src="photo3.jpg" alt="صورة 3">
        <p>انعكاس البحيرة</p>
    </div>
    <div class="gallery-item">
        <img src="photo4.jpg" alt="صورة 4">
        <p>قمة ثلجية</p>
    </div>
</div>

.gallery {
    max-width: 1000px;
    margin: 0 auto;
}

.gallery-item {
    float: left;
    width: 25%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.gallery-item p {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
}

/* متجاوب: عمودان على الأجهزة اللوحية */
@media (max-width: 768px) {
    .gallery-item {
        width: 50%;
    }
}

/* متجاوب: عمود واحد على الهواتف */
@media (max-width: 480px) {
    .gallery-item {
        width: 100%;
        float: none;
    }
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

الملخص

كان التعويم في CSS ميزة رائدة عندما تم تقديمه، مما مكّن النص من الالتفاف حول العناصر، ولسنوات عديدة، خدم كأداة أساسية لتخطيطات الصفحات. ومع ذلك، لم يُصمم التعويم أبداً للتخطيطات المعقدة، والحيل المطلوبة لجعله يعمل بشكل موثوق (clearfix، حيل overflow، حسابات العرض الدقيقة) جعلت تخطيطات التعويم هشة وصعبة الصيانة. اليوم، يوفر Flexbox و CSS Grid إمكانيات تخطيط متفوقة بكثير، لكن التعويم يظل الخيار الأفضل لغرضه الأصلي: التفاف النص حول الصور والمحتوى السطري الآخر. فهم التعويم ضروري لصيانة الشيفرة القديمة وللاستفادة من ميزات مثل shape-outside التي تعمل فقط مع العناصر المُعوَّمة.