شرح خاصتي float و clear في css

Ayman Alrawy · 6 مارس 2023

حاولت فهم float و clear كثيرا ولم افهم

معاذ قره محمد · 6 مارس 2023

– تُستخدم خاصية الـ float لتحديد موقع العنصر (سواء على الجانب الأيسر أو الأيمن من المحتوى).

مثال توضيحي لذلك:

<style>
    .container {
        border: 1px solid #000;
        height: 92px;
        padding: 15px;
    }
    
    .container .left {
        float: left;
        background-color: #e10000;
        color: #fff;
        padding: 15px;
        border-radius: 5px;
    }

    .container .right {
        float: right;
        background-color: #2722c8;
        color: #fff;
        padding: 15px;
        border-radius: 5px;
    }
</style>

<div class="container">
    <div class="left">Float Left</div>
   <div class="right">Float Right</div>
</div>

image.png.540c5f1fe2da438231a1f423a2bbd8ae.png

قيم خاصة float:

يمكن أن تحتوي خاصية الـ float على إحدى القيم التالية:

none: (الإفتراضى): العنصر لا يطفو على أيًا من الجانبين (سيتم عرضه فقط في مكان حدوثه في النص).

right: يطفو العنصر إلى يمين الحاوية

left: يطفو العنصر إلى يسار الحاوية

inherit: يرث العنصر قيمة تعويم أصله (أبيه).

خاصة clear:

– تحدد خاصية الـ clear العناصر التي يمكن أن تطفو بجانب العنصر الذي تم مسحه وعلى أي جانب.

الطريقة الأكثر شيوعًا لاستخدام خاصية الـ clear هي بعد استخدام خاصية الـ float على عنصر.

إذا تم تحريك عنصر إلى اليسار ، فيجب عليك تطبيق خاصية الـ clear إلى left.

إذا تم تحريك عنصر إلى اليمين، فيجب عليك تطبيق خاصية الـ clear إلى right.

مثال للتوضيح:

<style>
    .container {
        border: 2px solid #00F;
        padding: 5px;
    }
    
    .container .paragraph {
        float: right;
        border: 2px solid #F00;
        margin: 0;
        width: 50%;
    }

    .container .clear_right {
        clear: right;
        background-color: #acacac;
        margin: 0;
    }
</style>

<div class="container">
    <p class="paragraph">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh.</p>
    <p class="clear_right">Paragraph with clear right!</p>
</div>

الخرج:

image.png.c4ad98f6fe8cda9e430e253acfac957a.png

قيم الخاصة clear:

none: (افتراضي): يمسح العناصر العائمة على كلا الجانبين

right: يتم وضع العنصر أسفل العناصر العائمة اليمنى

left: يتم وضع العنصر أسفل العناصر العائمة اليسرى

both: يتم وضع العنصر أسفل كل من العناصر العائمة اليمنى واليسرى

ملاحظة صغيرة: إذا كان العنصر أطول من العنصر الذي يحتويه ، وكان float، فإنه يتجاوز خارج الحاوية.

لكن يمكنك حل هذه المشكلة عن طريق إستخدام خاصية overflow = auto

المزيد من التفصيل في حسوب: الخاصة float, الخاصة clear

بالتوفيق إن شاء الله

شرف الدين حفني · 6 مارس 2023

الخاصية float تُستخدم لوضع العنصر في مكان مُعين إما أقصى اليمين أو أقصى اليسار , سيمكنك فهم الأمر بشكلٍ أفضل عند قراءة المثال التالي

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<p><img src="test.jpg" style="width:170px;height:170px;margin-left:15px;">
يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p>

</body>
</html>

في هذا المثال إن قمت بتطبيقه لديك ستلاحظ ظهور الصورة وتحتها النص, ماذا لو أردنا ظهور الصورة على اليمين والنص بجانبها؟ أجل مثلما فكرت سنقوم بعمل float للصورة ناحية اليمين فبالتالي سيظهر النص على يسارها بدلًا من ظهوره اسفلها

<!DOCTYPE html>
<html>
<head>
<style>
  img {
  float: right;
}
</style>
</head>
<body>

<p><img src="test.jpg" style="width:170px;height:170px;margin-left:15px;">
يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p>

</body>
</html>

فائدة الclear هي إلغاء تأثير الfloat من بعض عنصر معين, ماذا نعني هنا؟ كما تلاحظ عندما قمت بكتابة float: right للصورة , فإن أي عنصر سيأتي بعد الصورة سيكون على يسارها, ماذا إن أردنا بعد ذلك وضع عناصر ولكن لا نريد ظهور تلك العناصر على يسار الصورة وإنما هي عناصر مختلفة نريدها ان تنزل تحت بشكلٍ عادي؟ هنا نستخدم الخاصية clear , لتوضيح الأمر فلننظر إلى المثال التالي

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p><img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;">
يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p>
  <img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;">
<p>
يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p>

</body>
</html>

هنا أردنا وضع صورة أخرى على اليمين وبجانبها نص مثلما عملنا في الصورة التي فوقها, ولكن المشكلة سنجد ان الصورة ستظهر بجانب الصورة الاولى بدلًا من الظهور تحتها وعلى يسارها النص, وذلك بسبب تأثير الfloat الخاص بالصورة الأولى, ولحل تلك المشكلة يجب إزالة تأثير الfloat الخاص بالصورة الأولى وذلك عبر الخاصية clear فنكتب clear:right ليصبح الشفرة البرمجية بالشكل التالي

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p><img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;">
يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p>
  <img src="pineapple.jpg" style="width:170px;height:170px;margin-left:15px;float:right;clear:right">
<p>
يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.
إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.
ومن هنا وجب على المصمم أن يضع نصوصا مؤقتة على التصميم ليظهر للعميل الشكل كاملاً،دور مولد النص العربى أن يوفر على المصمم عناء البحث عن نص بديل لا علاقة له بالموضوع الذى يتحدث عنه التصميم فيظهر بشكل لا يليق..</p>

</body>
</html>

محمد Fahmy · 9 مارس 2023

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

تعريف خاصيةFlexbo

خاصية Flexbox هي واحدة من الخصائص الأساسية في CSS التي تستخدم لترتيب العناصر في صفحة الويب بطريقة مرنة وسهلة. تسمح هذه الخاصية للمطورين بتحديد كيفية توزيع وتنظيم عناصر HTML داخل عنصر والتحكم في موقعها وحجمها.

للاستفادة من خاصية Flexbox ، يجب أولًا تعريف عنصر يحتوي على العناصر التي نود ترتيبها. يمكن استخدام خاصية "display: flex" لإضافة Flexbox إلى هذا العنصر. بعد ذلك ، يمكن استخدام Flexbox لتحديد كيفية توزيع العناصر داخل هذا العنصر.

مثال علي Flexbox:

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS:

.container {
  display: flex;
}

.item {
  flex: 1;
}

في هذه الحالة، ستظهر العناصر (Item) في نفس الصف وستوزع بشكل متساوٍ على طول المسافة المحجوزة للأب (Container).

ويمكنك التعمق أكثر في تعلم خاصية Flexbox من خلال هذه المقالات والنقاشات.

https://wiki.hsoub.com/تصنيف:CSS_Flexbox

https://io.hsoub.com/programming/119549-التحكم-في-العناصر-باستخدام-الصندوق-المرن-flexbox-الجـــــزء-الأول

https://io.hsoub.com/programming/32672-هل-تريد-تعلم-css-flexbox-حتى-الإحتراف-إليك-هذه-المصادر

شرح خاصتي float و clear في css

السؤال

Ayman Alrawy

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

معاذ قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

شرف الدين حفني

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد Fahmy

HTML:

CSS:

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية