تعليق اليسار: float:left;
التعليق الصحيح: float:right;
استخدام التعويم واسع جدا. هنا أقدم بإيجاز الاستخدامات الشائعة في المجموعة:
إذا تم تعليق العنصر الطفل ، فسوف يتسبب ذلك في انهيار العنصر الأصل على ارتفاع. هذا الجزء ينطوي على تطهير التعليق. سيذكر الفصل التالي شرح تطهير التعليق.
لذا عد إلى هذه النقطة ،
الظاهرة الأولى تعويم = كتلة مضمنةسيكون التعليق نمط 4 كتل يصبح وضع كتلة مضمّن: كما هو موضح في الشكل أدناه
<style> div {width: 200px ؛ الارتفاع: 200 بكسل ؛ خلفية اللون: وردي. الحدود: 1 بكسل سوداء صلبة. تعويم: اليسار. } </style><body> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv>الظاهرة الثانية:
كما هو موضح في الشكل أدناه ، حيث يتم تعليق الأول ، سيتم تقديم عنصر الكتلة الثاني أسفل العنصر الأول.
ومع ذلك ، لن يعبر العنصر الأخير إلى العنصر السابق ، مثل عنصر الكتلة الرابع ، ولكن لن يتم تعليق العنصر الثالث. لا يزال عنصر كتلة الموسم الرابع في وضعه الأصلي.
<style> .first-one {float: left ؛ خلفية اللون: الأخضر. } .second-one {background-color: purple ؛ . } .fourth-one {float: left ؛ لون الخلفية: رمادي. } div {width: 200px ؛ الارتفاع: 200 بكسل ؛ خلفية اللون: وردي. الحدود: 1 بكسل سوداء صلبة. حجم الخط: 30 بكسل ؛ } </style><Body> <div class = first-One> </viv> <div class = second One> </viv> <div class = thir-one> </viv> <div class = الرابع واحد> </div> <div class = الرابع-واحد> </div> </body>الظاهرة الثالثة:
إذا كانت جميع العناصر تطفو والعرض المتبقي للعنصر الأصل لا يكفي لدعم ترتيب العناصر الفرعية في هذا الصف ، فسيتم توصيله بالمستوى العلوي
تم استنساخ هذه المقالة من: https://segmentfault.com/a/1190000022669455
لخصهذه هي نهاية هذه المقالة حول تحليل موجز لاستخدام HTML العائمة العائمة. لمزيد من المحتوى العائم HTML العائم ، يرجى البحث عن المقالات السابقة من Wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!