الكورس

Advertisements

خصائص الـ 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 Left
Float Right

 

قيم خاصية 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>

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.

Paragraph with clear right!


 

قيم خاصية clear

 

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

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

 

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

Float Right Without Clear

لكن يمكنك حل هذه المشكلة عن طريق إستخدام خاصية 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 Right with Clear


 

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

 

;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>

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…


 

;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>

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…


 

;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>

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…



الإبلاغ عن خطأ

×

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

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements