خصائص الـ Float و Clear فى CSS

---

فى هذا الفصل سيتم شرح خاصية Float و Clear فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.

---

 

خاصية Float

 

Float property – تُستخدم خاصية الـ 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>

---

 

قيم خاصية float

 

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

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

 

---

 

خاصية Clear

 

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

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

عند محو الـ floats، يجب أن تتطابق مع خاصية clear:

• إذا تم تحريك عنصر إلى اليسار ، فيجب عليك تطبيق خاصية الـ 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>

---

 

قيم خاصية clear

 

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

• none (افتراضي): يمسح العناصر العائمة على كلا الجانبين.
• right: يتم وضع العنصر أسفل العناصر العائمة اليمنى.
• left: يتم وضع العنصر أسفل العناصر العائمة اليسرى.
• both: يتم وضع العنصر أسفل كل من العناصر العائمة يمينًا ويسارًا.
• inherit: يرث العنصر قيمة الـ clear من أصله.

 

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

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

<style>
.container {
  padding: 20px;
  border: 2px solid blue;
}

.clearfix {
  overflow: auto;
}

.container h2 {
  margin: 0;
  float: right;
}
</style>

<div class="container clearfix">
    <h2>Float Right with Clearfix</h2>
</div>

---

 

أمثلة لزياده الفهم

 

;Float: left

 

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

<style>
    .container {
        border: 2px solid #00f;
        height: 159px;
        padding: 17px;
        overflow: hidden;
    }
    
    .container .block_left {
        float: left;
        background-color: #1c00e1;
        color: #fff;
        padding: 15px;
        border-radius: 6px;
        height: 89px;
        width: 116px;
        margin-right: 11px;
    }
</style>

<div class="container">
   <div class="block_left"></div>
    <p>Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...</p>
</div>

---

 

;Float: right

 

يحدد المثال التالي block لونه أحمر يجب أن يطفو إلى يمين النص، كالتالى:

<style>
    .container {
        border: 2px solid #F00;
        height: 159px;
        padding: 17px;
        overflow: hidden;
    }
    
    .container .block_right {
        float: right;
        background-color: #F00;
        color: #fff;
        padding: 15px;
        border-radius: 6px;
        height: 89px;
        width: 116px;
        margin-right: 11px;
    }
</style>

<div class="container">
   <div class="block_right"></div>
    <p>nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...</p>
</div>

---

 

;Float: none

 

في المثال التالي ، سيتم عرض الـ block في مكان ظهوره الطبيعى، كالتالى:

<style>
    .container {
        border: 2px solid #F00;
        padding: 17px;
    }
    
    .container .none {
        float: none;
        background-color: #F00;
        color: #fff;
        padding: 15px;
        border-radius: 6px;
        height: 89px;
        width: 116px;
        margin-right: 11px;
    }
</style>

<div class="container">
   <div class="none"></div>
    <p>nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...</p>
</div>