خاصية تعويم CSS والمقاصة

كيفية العمل معfloatالممتلكات في CSS ومع المقاصة

كان العوم موضوعًا مهمًا جدًا في الماضي.

تم استخدامه في الكثير من الاختراقات والاستخدامات الإبداعية لأنها كانت إحدى الطرق القليلة ، جنبًا إلى جنب مع الجداول ، يمكننا حقًا تنفيذ بعض التخطيطات. في الماضي كنا نحرك الشريط الجانبي إلى اليسار ، على سبيل المثال ، لإظهاره على الجانب الأيسر من الشاشة وإضافة بعض الهامش إلى المحتوى الرئيسي.

لحسن الحظ ، تغيرت الأوقات واليوم لدينا Flexbox و Grid لمساعدتنا في التخطيط ، وعاد الطفو إلى نطاقه الأصلي: وضع المحتوى على جانب واحد من عنصر الحاوية ، وجعل أشقائه يظهرون حوله.

الfloatالخاصية تدعم 3 قيم:

  • left
  • right
  • none(الافتراضي)

لنفترض أن لدينا مربعًا يحتوي على فقرة بها نص ، وتحتوي الفقرة أيضًا على صورة.

إليك بعض التعليمات البرمجية:

<div class="parent">
  <div class="child">
    <div class="box">
      <p>This is some random paragraph and an image. <img src="https://via.placeholder.com/100x100" /> The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.
      </p>
    </div>
  </div>
</div>
.parent {
  background-color: #af47ff;
  padding: 30px;
  width: 500px;
}

.child { background-color: #ff4797; padding: 30px; }

.box { background-color: #f3ff47; padding: 30px; border: 2px solid #333; border-style: dotted; font-family: courier; text-align: justify; font-size: 1rem; }

والمظهر المرئي:

كما ترى ، فإن التدفق الطبيعي بشكل افتراضي يأخذ في الاعتبار الصورة المضمنة ، ويوفر مساحة لها في السطر نفسه.

إذا أضفناfloat: leftللصورة وبعض المساحة المتروكة:

img {
  float: left;
  padding: 20px 20px 0px 0px;
}

هذه هي النتيجة:

وهذا ما نحصل عليه من خلال تطبيق تعويم: صحيح ، ضبط الحشو وفقًا لذلك:

img {
  float: right;
  padding: 20px 0px 20px 20px;
}

تتم إزالة عنصر عائم من التدفق العادي للصفحة ، ويتدفق المحتوى الآخر حوله.

انظر المثال على Codepen

أنت لست مقيدًا بالصور العائمة أيضًا. هنا نبدل الصورة بامتدادspanجزء:

<div class="parent">
  <div class="child">
    <div class="box">
      <p>This is some random paragraph and an image. <span>Some text to float</span> The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text.
      </p>
    </div>
  </div>
</div>
span {
  float: right;
  margin: 20px 0px 20px 20px;
  padding: 10px;
  border: 1px solid black
}

وهذه هي النتيجة:

المقاصة

ماذا يحدث عندما تطفو أكثر من عنصر؟

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

لنفترض أن لدينا 3 صور مضمنة داخل ملفpبطاقة شعار:

إذا أضفناfloat: leftلتلك الصور:

img {
  float: left;
  padding: 20px 20px 0px 0px;
}

هذا ما سيكون لدينا:

اذا اضفتclear: leftللصور ، سيتم تكديسها عموديًا وليس أفقيًا:

لقد استخدمت ملفleftقيمةclear. تسمح

  • leftلمسح العوامات اليسرى
  • rightلمسح العوامات الصحيحة
  • bothلمسح العوامات اليمنى واليسرى
  • none(افتراضي) يعطل المقاصة

تحميل مجانيكتيب CSS


المزيد من دروس css: