float في لغة CSS؟

السلام عليكم ورحمة الله تعالى وبركاته في هذا الدرس إن شاء الله سنتعرف على خاصية Float في CSS وكيفية استخدامها لتحسين تصميم صفحات الويب

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

قيم خاصية Float

تقبل خاصية Float في CSS القيم التالية:

left: تحديد موقع العنصر على الجانب الأيسر من عنصر أخر.

right: تحديد موقع العنصر على الجانب الأيمن من عنصر أخر.

none: عدم تحديد أي موقع للعنصر.

inherit: تورث قيمة خاصية Float من العنصر الأصلي.

مثال عملي على خاصية Float

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

HTML

<div class="container>
    <img src="image1.jpg">
    <p>نص تجريبي<p>
    <img src="image2.jpg">
</div>

CSS

.container {
    width: 500px;
}
img {
    float: left;
    margin-right: 20px;
}

في هذا المثال، نمتلك عنصر div يحتوي على صورتين ونص. باستخدام Float يمكننا ترتيب الصور والنص بجانب بعضهم البعض. تم استخدام float: left لتحديد موقع الصور على اليسار، وتم إضافة margin-right لتحديد المسافة بين الصور والنص.

خاصية Overflow

تعد خاصية Overflow في CSS أحد الخصائص الهامة التي يمكن استخدامها للتحكم في تدفق المحتوى داخل عناصر HTML، ويتم استخدامها لتحديد ما يحدث عندما يتجاوز المحتوى حجم العنصر.

قيم خاصية Overflow

تقبل خاصية Overflow في CSS القيم التالية:

visible: يسمح بتدفق المحتوى خارج حدود العنصر.

hidden: يخفي المحتوى الذي يتجاوز حجم العنصر.

scroll: يجعل شريط التمرير مرئيًا للتمكن من التمرير داخل العنصر.

auto: يجعل شريط التمرير ظاهرًا فقط إذا كان المحتوى يتجاوز حجم العنصر.

inherit: تورث قيمة خاصية Overflow من العنصر الأصلي.

خاصية Clear

تعد خاصية Clear فيCSS خاصية مهمة يتم استخدامها لمنع العناصر السابقة من التعامل مع العناصر التي تم تحديدها باستخدام Float. يمكن استخدامها في عناصر HTML مثل p و`div` و`section`.

قيم خاصية Clear

تقبل خاصية Clear في CSS القيم التالية:

left: تمرير العنصر تحت العناصر التي تم تحديدها باستخدام Float على اليسار.

right: تمرير العنصر تحت العناصر التي تم تحديدها باستخدام Float على اليمين.

both: تمرير العنصر تحت العناصر التي تم تحديدها باستخدام Float على الجانبين.

none: لا يتمرر العنصر تحت أي عنصر تم تحديده باستخدام Float.

inherit: تورث قيمة خاصية Clear من العنصر الأصلي.

مثال عملي على خاصية Overflow و Clear

لتوضيح استخدام خاصيتي Overflow و Clear يمكننا استخدام مثال عملي بسيط لتحديد ما يحدث عندما يتجاوز المحتوى حجم العنصر وكيفية تحديد موقع العناصر باستخدام Clear.

HTML

<div class="container>
    <img src="image.jpg">
    <p>نص تجريبي يحتوي على الكثير من النص يمكن أن يتجاوز حجم العنصر.<p>
</div>

CSS

.container {
    width: 500px;
}
img {
    float: left;
    margin-right: 20px;
}
p {
    overflow: auto;
    clear: both;
}

في هذا المثال، نمتلك عنصر div يحتوي على صورة ونص. تم استخدام Float لتحديد موقع الصورة على اليسار، وتم إضافة margin-right لتحديد المسافة بين الصورة والنص.

تم استخدام خاصية Overflow مع العنصر p لتحديد ما يحدث عندما يتجاوز المحتوى حجم العنصر. تم استخدام overflow: auto لجعل شريط التمرير مرئيًا حتى يسمح بالتمرير داخل العنصر.

أخيرًا، تم استخدام خاصية Clear مع العنصر p لمنع النص من التعامل مع الصورة التي تم تحديدها باستخدام Float. تم استخدام clear: both لتحديد أن العنصر p يجب أن ينتقل تحت الصورة بدلاً من التعامل معها بأي طريقة.

بهذه الطريقة، يمكننا استخدام خاصيتي Float و Overflow و Clear لتحسين تصميم صفحات الويب وتحديد موقع العناصر بطريقة أكثر دقة وتحكم في ترتيبها وتدفق المحتوى داخلها

Example:

بهذا نكون قد انتهينا من شرح خاصية Float و Overflow و Clear في CSS وأهميتها وكيفية استخدامها لتحسين تصميم صفحات الويب. يجب على المصممين الاهتمام بتعلم هذه الخصائص واستخدامها بشكل صحيح لتحسين تجربة المستخدم وتحسين تصميم الصفحات عبر الإنترنت.

float: left float: right float: none