random
أخبار ساخنة

شرح خاصيتي float و clear في CSS مع أمثلة عملية

Samouel Ghaly
الصفحة الرئيسية

شَرْحُ خَاصِّيَّتَيْ Float وَ Clear فِي CSS مَعَ الأَمْثِلَةِ العَمَلِيَّةِ

فِي هَنْدَسَةِ وَتَصْمِيمِ صَفَحَاتِ الوِيبِ التَّقْلِيدِيَّةِ، نَحْتَاجُ كَثِيرًا إِلَى تَرْتِيبِ العَنَاصِرِ أُفُقِيًّا أَوْ جَعْلِ النُّصُوصِ تَلْتَفُّ حَوْلَ الصُّوَرِ بِانْسِيَابِيَّةٍ كَمَا نَرَى فِي المَجَلَّاتِ وَالصُّحُفِ المَطْبُوعَةِ. لِتَحْقِيقِ هَذَا التَّوَازُنِ البَصَرِيِّ، نَعْتَمِدُ عَلَى خَاصِّيَّتَيْ float (العَوْمِ/الطَّفْوِ) وَ clear (التَّصْفِيَةِ/المَنْعِ) فِي لُغَةِ CSS. تُعَدُّ هَاتَانِ الخَاصِّيَّتَانِ مِنْ رَكَائِزِ التَّحَكُّمِ فِي التَّدَفُّقِ الهَيْكَلِيِّ لِلْمَوْقِعِ (Layout Flow) قَبْلَ ظُهُورِ الأَنْظِمَةِ الحَدِيثَةِ.

---

أَوَّلًا: مَا هِيَ خَاصِّيَّةُ Float؟ (طَفْوُ العَنَاصِرِ)

تَقُومُ خَاصِّيَّةُ float بِدَفْعِ العُنْصُرِ لِيَطْفُو نَحْوَ أَحَدِ الجَانِبَيْنِ (اليَمِينِ أَوِ اليَسَارِ) دَاخِلَ الصُّنْدُوقِ الحَاوِي لَهُ. عِنْدَمَا يَطْفُو العُنْصُرُ، فَإِنَّهُ يَخْرُجُ جُزْئِيًّا مِنْ تَدَفُّقِ الصَّفْحَةِ العَادِيِّ، مِمَّا يَسْمَحُ لِلْنُّصُوصِ وَالعَنَاصِرِ السَّطْرِيَّةِ (Inline Elements) بِالِالْتِفَافِ حَوْلَهُ فِي الجَانِبِ العَكْسِيِّ سَلِسًا.

1. float: left (العَوْمُ نَحْوَ اليَسَارِ)

يَتَحَرَّكُ العُنْصُرُ إِلَى أَقْصَى يَسَارِ الحَاوِيَةِ، وَتَقُومُ النُّصُوصُ وَالعَنَاصِرُ المُجَاوِرَةُ بِالتَّدَفُّقِ حَوْلَهُ مِنْ جِهَةِ اليَمِينِ. 

<!-- بِنْيَةُ الـ HTML لِلْعَوْمِ نَحْوَ اليَسَارِ -->
<div class="box left-flow">
  <img src="image.jpg" alt="صُورَةٌ تَوْضِيحِيَّةٌ">
  <p>هَذَا نَصٌّ يَلْتَفُّ وَيَتَدَفَّقُ حَوْلَ الصُّورَةِ العَائِمَةِ مِنْ جِهَةِ اليَمِينِ نَظِيفًا.</p>
</div>

<style>
.left-flow img {
    float: left; /* جَعْلُ الصُّورَةِ تَطْفُو لِلْيَسَارِ */
    margin-right: 15px; /* فَرَاغٌ لِمَنْعِ اِلْتِصَاقِ النَّصِّ بِالصُّورَةِ */
}
</style>

2. float: right (العَوْمُ نَحْوَ اليَمِينِ)

يَتَحَرَّكُ العُنْصُرُ إِلَى أَقْصَى يَمِينِ الحَاوِيَةِ، وَتَقُومُ النُّصُوصُ بِالتَّدَفُّقِ وَالِالْتِفَافِ حَوْلَهُ مِنْ جِهَةِ اليَسَارِ (مِثَالِيٌّ لِلْمَوَاقِعِ بِاللُّغَةِ العَرَبِيَّةِ). 

<!-- بِنْيَةُ الـ HTML لِلْعَوْمِ نَحْوَ اليَمِينِ -->
<div class="box right-flow">
  <img src="image.jpg" alt="صُورَةٌ تَوْضِيحِيَّةٌ">
  <p>هَذَا نَصٌّ يَلْتَفُّ وَيَتَدَفَّقُ حَوْلَ الصُّورَةِ العَائِمَةِ مِنْ جِهَةِ اليَسَارِ بَارِزًا.</p>
</div>

<style>
.right-flow img {
    float: right; /* جَعْلُ الصُّورَةِ تَطْفُو لِلْيَمِينِ */
    margin-left: 15px; /* فَرَاغٌ لِمَنْعِ اِلْتِصَاقِ النَّصِّ بِالصُّورَةِ */
}
</style>

3. float: none (إِلْغَاءُ العَوْمِ)

هَذِهِ هِيَ القِيمَةُ الاِفْتِرَاضِيَّةُ (Default) لِجَمِيعِ العَنَاصِرِ؛ حَيْثُ لَا يَطْفُو العُنْصُرُ وَيَلْتَزِمُ بِسُلُوكِهِ الطَّبِيعِيِّ فِي النُّزُولِ تَحْتَ العَنَاصِرِ الَّتي قَبْلَهُ.

---

ثَانِيًا: مَا هِيَ خَاصِّيَّةُ Clear؟ (مَنْعُ الِالْتِفَافِ)

بِمَا أَنَّ العَنَاصِرَ العَائِمَةَ تَخْرُجُ جُزْئِيًّا مِنَ التَّدَفُّقِ، فَإِنَّ العَنَاصِرَ الَّتِي تَلِيهَا فِي الكُودِ سَتُحَاوِلُ تِلْقَائِيًّا الصُّعُودَ وَالِالْتِفَافَ حَوْلَهَا. إِذَا كُنْتَ تُرِيدُ مَنَعَ عُنْصُرٍ مُعَيَّنٍ (مِثْلَ فَقَرَةٍ جَدِيدَةٍ أَوْ تَهْيِئَةِ الفُوتَر) مِنَ الصُّعُودِ، نَسْتَخْدِمُ خَاصِّيَّةَ clear. هَذِهِ الخَاصِّيَّةُ تَقُولُ لِلْمُتَصَفِّحِ: "اِمْنَعْ هَذَا الصُّنْدُوقَ مِنَ الوُقُوفِ بِجِوَارِ العَنَاصِرِ العَائِمَةِ، وَاجْعَلْهُ يَنْزِلُ أَسْفَلَهَا".

1. clear: left (مَنْعُ العَوْمِ اليَسَارِيِّ)

يَمْنَعُ العُنْصُرَ مِنَ الِالْتِصَاقِ بِأَيِّ عُنْصُرٍ يَطْفُو نَحْوَ اليَسَارِ، وَيُجْبِرُهُ عَلَى النُّزُولِ أَسْفَلَهُ تَمَامًا. 

<div class="container">
  <div style="float: left; width: 100px; height: 100px; background-color: red;">مُرَبَّعٌ عائِمٌ لِلْيَسَارِ</div>
  <div style="clear: left; background-color: blue; color: white;">هَذَا العُنْصُرُ سَيَنْزِلُ إِجْبَارِيًّا أَسْفَلَ المُرَبَّعِ الأَحْمَرِ.</div>
</div>

2. clear: right (مَنْعُ العَوْمِ اليَمِينِيِّ)

يَمْنَعُ العُنْصُرَ مِنَ الِالْتِصَاقِ بِأَيِّ عُنْصُرٍ يَطْفُو نَحْوَ اليَمِينِ، وَيَجْعَلُهُ يَظْهَرُ فِي سَطْرٍ جَدِيدٍ أَسْفَلَهُ. 

<div class="container">
  <div style="float: right; width: 100px; height: 100px; background-color: green;">مُرَبَّعٌ عائِمٌ لِلْيَمِينِ</div>
  <div style="clear: right; background-color: yellow;">هَذَا العُنْصُرُ سَيَنْزِلُ إِجْبَارِيًّا أَسْفَلَ المُرَبَّعِ الأَخْضَرِ.</div>
</div>

3. clear: both (المَنْعُ الكُلِّيُّ الشَّامِلُ)

هِيَ القِيمَةُ الأَكْثَرَ شُيُوعًا وَأَمَانًا؛ حَيْثُ تَمْنَعُ العُنْصُرَ مِنَ الِالْتِصَاقِ بِأَيِّ عُنْصُرٍ عَائِمٍ مَهْمَا كَانَ اتِّجَاهُهُ (يَمِينًا أَوْ يَسَارًا)، وَتُجْبِرُهُ عَلَى الِانْفِصَالِ عَمُودِيًّا لِيَقَعَ أَسْفَلَ جَمِيعِ العَنَاصِرِ الطَّافِيَةِ. 

<div class="container">
  <div style="float: left; width: 100px; height: 50px; background-color: orange;">عائِمٌ لِلْيَسَارِ</div>
  <div style="float: right; width: 100px; height: 50px; background-color: purple;">عائِمٌ لِلْيَمِينِ</div>
  <div style="clear: both; background-color: pink;">هَذَا العُنْصُرُ يَنْزِلُ تَحْتَ كِلَا العُنْصُرَيْنِ العَائِمَيْنِ بِنَجَاحٍ.</div>
</div>
---

مُشْكِلَةُ اِنْهِيَارِ الحَاوِيَةِ (Collapsing Parent) وَحَلُّ الـ Clearfix

مِنْ أَشْهَرِ المَشَاكِلِ الهَنْدَسِيَّةِ الَّتِي تُسَبِّبُهَا خَاصِّيَّةُ float هِيَ أَنَّ العَنَاصِرَ الأَبْنَاءَ عِنْدَمَا تَعُومُ كُلُّهَا، يَعْتَبِرُ الأَبُ (Parent) أَنَّ اِرْتِفَاعَهُ يُسَاوِي صِفْرًا (لِأَنَّهُمْ خَرَجُوا مِنَ التَّدَفُّقِ الطَّبِيعِيِّ)، مِمَّا يُؤَدِّي إِلَى اِنْهِيَارِ خَلْفِيَّةِ الأَبِ وَحُدُودِهِ.

لِحَلِّ هَذِهِ المُشْكِلَةِ بِاحْتِرَافِيَّةٍ، نَسْتَخْدِمُ خُدْعَةَ الـ Clearfix النَّمُوذَجِيَّةِ عَبْر الـ CSS، حَيْثُ نَقُومُ بِإِيجَادِ عُنْصُرٍ وَهْمِيٍّ بَعْدَ الأَبْنَاءِ لِيَقُومَ بِتَصْفِيَةِ العَوْمِ وَتَمْدِيدِ ارْتِفَاعِ الأَبِ تِلْقَائِيًّا: 

/* كُودُ الـ Clearfix السِّحْرِيِّ لِحِمَايَةِ الحَاوِيَةِ مِنَ الِانْهِيَارِ */
.clearfix::after {
    content: "";
    display: table;
    clear: both; /* تَصْفِيَةُ جَمِيعِ أَنْوَاعِ العَوْمِ دَاخِلَ الأَبِ */
}
---

جَدْوَلُ المُقَارَنَةِ المِعْيَارِيِّ لِخَاصِّيَّتَيْ Float وَ Clear

لِمَسْحِ السُّلُوكِيَّاتِ البَصَرِيَّةِ لِهَاتَيْنِ الأَدَوَاتِ بِنَظْرَةٍ مَسْحِيَّةٍ سَرِيعَةٍ:

الخَاصِّيَّةُ وَالقِيمَةُ السُّلُوكُ البِنْيَوِيُّ (Layout Effect) الغَرَضُ التَّصْمِيمِيُّ النَّمُوذَجِيُّ
float: left; يَدْفَعُ العُنْصُرَ لِلْيَسَارِ وَيَجْعَلُ النَّصَّ يَلْتَفُّ يَمِينًا. وَضْعُ صُورَةٍ عَلَى اليَسَارِ دَاخِلَ المَقَالَاتِ النَّصِّيَّةِ.
float: right; يَدْفَعُ العُنْصُرَ لِلْيَمِينِ وَيَجْعَلُ النَّصَّ يَلْتَفُّ يَسَارًا. تَنْسِيقُ كُتَلِ النُّصُوصِ وَالصُّوَرِ فِي الوَاجِهَاتِ العَرَبِيَّةِ.
clear: left; يَمْنَعُ العُنْصُرَ مِنَ الِالْتِصَاقِ بِالعَنَاصِرِ العَائِمَةِ يَسَارًا. إِجْبَارُ الفَقَرَاتِ عَلَى البِدْءِ مِنْ سَطْرٍ جَدِيدٍ نَظِيفٍ.
clear: right; يَمْنَعُ العُنْصُرَ مِنَ الِالْتِصَاقِ بِالعَنَاصِرِ العَائِمَةِ يَمِينًا. مَنَعُ التَّدَاخُلِ البَصَرِيِّ فِي هَيْكَلِ التَّقْسِيمِ اليَمِينِيِّ.
clear: both; يُصَفِّي جَمِيعَ أَنْوَاعِ العَوْمِ وَيَجْبُرُ النُّزُولَ لِلْأَسْفَلِ. تَنْسِيقُ تَذْيِيلِ المَوْقِعِ (Footer) لِيَقَعَ دَائِمًا فِي القَاعِ آمِنًا.
---

خَاتِمَةٌ

إِنَّ فَهْمَكَ العَمِيقَ لِكَيْفِيَّةِ التَّنَاغُمِ بَيْن خَاصِّيَّتَيْ float وَ clear يُعْتَبَرُ خُطْوَةً أَسَاسِيَّةً لِإِدَارَةِ تَدَفُّقِ المَحْتَوَى البَصَرِيِّ بِاحْتِرَافِيَّةٍ. رَغْمَ أَنَّ مَشَارِيعَ الوِيبِ الحَدِيثَةَ بَاتَتْ تَعْتَمِدُ أَكْثَرَ عَلَى Flexbox وَ Grid فِي بِنَاءِ الهَيْكَلِ العَامِّ، إِلَّا أَنَّ الـ float يَبْقَى الخِيَارَ القِيَاسِيَّ الأَمْثَلَ لِإِدَارَةِ اِلْتِفَافِ النُّصُوصِ حَوْلَ الرُّسُومِ وَالصُّوَرِ. طَبِّقْ هَذِهِ المَعَايِيرَ وَاسْتَعِنْ بِخُدْعَةِ الـ Clearfix لِتَحْصُلَ عَلَى صَفَحَاتٍ مُنَظَّمَةٍ وَخَالِيَةٍ مِنَ الأَخْطَاءِ التَّصْمِيمِيَّةِ.

google-playkhamsatmostaqltradent