اضبط ارتفاع العنصر الأصل السابق. ملاحظة: في تطوير المؤسسة ، لا تكتب الارتفاع إذا كنت تستطيع القيام بذلك.
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> d131_clearfloat </title> <style> .smallbox1 {width: 100px ؛ الارتفاع: 100px ؛ لون الخلفية: أحمر. بودر: 3 بكسل سوداء صلبة. الهامش: 5px ؛ تعويم: يمين ؛} .smallbox2 {العرض: 100px ؛ الارتفاع: 100px ؛ لون الخلفية: أحمر. بودر: 3 بكسل سوداء صلبة. الهامش: 5px ؛} .smallbox3 {العرض: 100px ؛ لون الخلفية: أحمر. بودر: 3 بكسل سوداء صلبة. الهامش: 5px ؛} .smallbox3 {العرض: 100px ؛ الارتفاع: 100px ؛ لون الخلفية: أحمر. بودر: 3 بكسل سوداء صلبة. الهامش: 5px ؛} .smallbox4 {العرض: 100px ؛ الارتفاع: 100px ؛ لون الخلفية: أحمر. بودر: 3 بكسل سوداء صلبة. الهامش: 5px ؛} .smallbox5 {العرض: 100px ؛ الارتفاع: 100px ؛ لون الخلفية: أحمر. بودر: 3 بكسل سوداء صلبة. الهامش: 5px ؛} .smallbox6 {العرض: 100px ؛ الارتفاع: 100px ؛ لون الخلفية: أحمر. الجسم: 3 بكسل سوداء صلبة. الهامش: 5px ؛} .bigbox1 ، .bigbox2 { /*width: 400px ؛* / /*width: 400px ؛* / background-color: Green ؛ الحدود: 3 بكسل سوداء صلبة. } </style> </head> <body> <div class = bigbox1> <div class = smallBox1> </viv> <div class = smallbox2> </viv class = smallbox3> </viv> </viv class = divbox2> <div class = smallbox4> </div class = smallbox5> class = smallbox5> </viv> <div class = smallbox6> </viv> </viv> </body> </html> 2. الطريقة الثانية لتطهير الطفوأضف سمة واضحة إلى السمة التالية
السمة الواضحة تأخذ القيمة:
لا شيء: يتم أخذ القيمة الافتراضية ، وفقًا لقواعد الفرز للعناصر العائمة (تعويم يسار للعثور على العائمة اليسرى ، عوامة يمين للعثور على العائمة اليمنى)
اليسار: لا تبحث عن العنصر العائم الأيسر في المقدمة
اليمين: لا تبحث عن العنصر العائم الصحيح في المقدمة
كلاهما: لا تبحث عن العناصر اليسرى العائمة والعائمة في المقدمة
على سبيل المثال: لا نضع عرض وارتفاع الصندوق الكبير ، فإن الصندوق الصغير سيدعم المربع الكبير ، لكن الصناديق الكبيرة ستكونان على التوالي بسبب هذا.
.smallbox1 {العرض: 100px ؛ الارتفاع: 100px ؛ تعويم: اليسار. لون الخلفية: أحمر. الحدود: 2 بكسل سوداء صلبة. } .smallbox2 {width: 100px ؛ الارتفاع: 100px ؛ تعويم: اليسار. لون الخلفية: أحمر. الحدود: 2 بكسل سوداء صلبة. } .smallbox3 {width: 100px ؛ الارتفاع: 100px ؛ تعويم: اليسار. لون الخلفية: الأزرق. الحدود: 2 بكسل سوداء صلبة. } .smallbox4 {width: 100px ؛ الارتفاع: 100px ؛ تعويم: اليسار. لون الخلفية: الأزرق. الحدود: 2 بكسل سوداء صلبة. } </style> </head> <body> <div class = bigbox1> <div class = smallbox1> </viv> <div class = smallbox2> </viv> <viv> <div class = bigbox2> <viv class = smallbox3> </viv> <div class = smallbox4> </div> </body>نستخدم السمة الواضحة في المربع الصغير الثالث ، حتى نتمكن من بدء سطر جديد (ليس هناك حاجة لخط جديد ، لأننا نريد أن يكون الجهاز الثالث بجوار المرتبة الرابعة) ، ونحن بحاجة فقط إلى رمز المربع الصغير الثالث لتعديل الرمز.
.smallbox3 {clear: Left ؛ العرض: 100px ؛ الارتفاع: 100px ؛ تعويم: اليسار. لون الخلفية: الأزرق. الحدود: 2 بكسل سوداء صلبة. }ملاحظة: انتهت صلاحية سمة الهامش ، وسوف نتحدث عن الطريقة التي لا تنتهي صلاحيتها في المرة القادمة.
3. رمز المصدر:d131_clearfloat.html
d132_clearattribute.html
عنوان:
https://github.com/ruigege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/ruigege66/html_learning/blob/master/d132_clearattribute.html
لخصما سبق هما طريقتان لمسح HTML العائم الذي يقدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!
إذا كنت تعتقد أن هذه المقالة مفيدة لك ، فيرجى إعادة طباعتها. يرجى الإشارة إلى المصدر ، شكرا لك!