تحديد التحليل لـ CSS

يمكن للصناديق الحركية التحرك إلى اليسار أو اليمين حتى يصلوا إلى الحافة الخارجية للصندوق المحتوي أو الحافة الخارجية للصندوق الحركي الآخر.

بما أن الصندوق الحركي لا يتواجد في تدفق الوثيقة العادي، فإن الصناديق العادية في تدفق الوثيقة تتصرف كما لو لم يكن هناك صندوق حركي.

تحديد التحليل لـ CSS

أنظر إلى الشكل التالي، عندما يطفو الصندوق 1 إلى اليمين، يخرج من تدفق الوثيقة ويتحرك إلى اليمين حتى يصل إلى اليمين على حافة الصندوق المحتوي:

مثال CSS للتحليل - العناصر المتحركة إلى اليمين

أنظر إلى الشكل التالي، عندما يطفو الصندوق 1 إلى اليسار، يخرج من تدفق الوثيقة ويتحرك إلى اليسار حتى يصل إلى اليسار على حافة الصندوق المحتوي. لأنه لم يعد جزءًا من تدفق الوثيقة، فهو لا يأخذ مساحة، ويغطي في الواقع الصندوق 2، مما يجعل الصندوق 2 يختفي من النطاق.

مثال CSS للتحليل - العناصر المتحركة إلى اليسار

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

مثال CSS للتحليل 2 - العناصر المتحركة إلى اليسار

خاصية float لـ CSS

في CSS، نحقق حركة العناصر من خلال خاصية float.

للحصول على معلومات أكثر حول خاصية float، يرجى زيارة دليل المراجعة:خاصية float لـ CSS.

إطار السطر والتنظيف

يقصر إطار السطر بجانب الصندوق الحركي، مما يترك مساحة للصندوق الحركي، ويحيط السطر بالصندوق الحركي.

لذلك، يمكن إنشاء صندوق حركي لجعل النص يحيط بالصورة:

حلقة النص حول العناصر المتحركة

لمنع إطار الحركة من حول الصندوق، يجب تطبيق ذلك الإطار خصائص clearيمكن أن تكون قيمة خاصية clear left، right، both أو none، مما يعني أي جوانب من الصندوق لا يجب أن تكون مجاورة للصندوق المطفو.

لتحقيق هذا التأثير، في العنصر الذي يتم تنظيفه،النسيج العلوويإضافة مساحة كافية في الوجهة العلوية لتحقيق أن يتنازل عنصر الوجهة العلوية إلى أسفل حاوية التطفو:

مثال على خاصية clear - تطبيق clear على حلقة النص

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

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

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>نص معين</p>
</div>

في هذه الحالة، ظهرت مشكلة. لأن العنصر المطفو انفصل عن تدفق المستند، لذا لا يأخذ div المحيط مكانًا.

كيف يمكن للعنصر المحيط أن يحيط بعنصر التطفو بوضوح؟ يجب تطبيق clear في مكان ما داخل العنصر هذا:

مثال على خاصية clear - تطبيق التنظيف على العنصر الفارغ

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

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>نص معين</p>
<div class="clear"></div>
</div>

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

لكن لدينا أيضًا طريقة أخرى، وهي تطبيق التطفو على div المحتوي:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>نص معين</p>
</div>

بهذا يمكننا الحصول على تأثير الذي نريده. ولكن، العنصر التالي سيكون موثوقًا بهذا العنصر المطفو. من أجل حل هذه المشكلة، يفضل بعض الناس تطبيق الت浮动 على كل شيء في التخطيط، ثم استخدام العناصر المهمة (غالبًا هي قاعدة الموقع) لتنظيف التطفو. هذا يساعد في تقليل أو إزالة العلامات غير الضرورية.

في الواقع، جميع الصفحات على موقع CodeW3C.com تستخدم هذه التقنية، إذا قمت بفتح ملف CSS الذي نستخدمه، سترى أننا قمنا بتنظيف div للقاعدة، وثلاثة div أعلى القاعدة تطفو إلى اليسار.

خاصية clear لـ CSS

نحن من قبل ناقشنا بشكل مفصل عن مبدأ عمل تنظيف CSS و طريقة تطبيق خاصية clear. إذا كنت ترغب في معرفة معلومات أكثر حول خاصية clear، يرجى زيارة دليل المراجعة:خاصية clear لـ CSS.

مثال على التحليل والتنظيف

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