html - www - كيف يمكنك الحفاظ على الآباء من العناصر الطافية من الانهيار؟




www w3schools com html5 (11)

هذا السؤال لديه بالفعل إجابة هنا:

على الرغم من أن عناصر مثل <div> s تنمو بشكل طبيعي لتلائم محتوياتها ، فإن استخدام الخاصية float يمكن أن يتسبب في حدوث مشكلة مذهلة بالنسبة إلى newbies CSS: إذا كانت العناصر الطافية تحتوي على عناصر رئيسية غير معماة ، فسيتم انهيار الأصل.

فمثلا:

  <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

لن يتوسع div الأصل في هذا المثال ليحتوي أطفاله العائمة - سيبدو أنه يحتوي على height: 0 .

كيف تحل هذه المشكلة؟

أرغب في إنشاء قائمة شاملة من الحلول هنا. إذا كنت على دراية بمشكلات التوافق عبر المتصفحات ، فالرجاء توجيهها.

الحل 1

تعويم الوالد.

  <div style="float: left;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

الايجابيات : الكود الدلالي.
السلبيات : قد لا ترغب دائمًا في تعويم الوالد. حتى لو قمت بذلك ، هل تطفو والد الوالدين ، وما إلى ذلك؟ يجب أن تطفو كل عنصر سلف؟

الحل 2

امنح الوالد ارتفاعًا صريحًا.

    <div style="height: 300px;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

الايجابيات : الكود الدلالي.
السلبيات : غير مرنة - إذا تغير المحتوى أو تم تغيير حجم المستعرض ، فسوف ينكسر التخطيط.

الحل 3

إلحاق عنصر "spacer" داخل العنصر الأصل ، كما يلي:

    <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
        <div class="spacer" style="clear: both;"></div>
    </div>

الايجابيات : مباشرة إلى التعليمات البرمجية.
سلبيات : لا دلالة. يوجد div spacer فقط كاختصار تخطيط.

الحل 4

تعيين الوالد overflow: auto .

   <div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

الايجابيات : لا يتطلب div إضافي.
سلبيات : يبدو وكأنه الاختراق - وهذا ليس الهدف المعلن للممتلكات overflow .

تعليقات؟ اقتراحات أخرى؟


الحل 1:

يبدو أن الأسلوب الأكثر موثوقية وغير مزعجة هو:

العرض التوضيحي: http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

مع القليل من استهداف CSS ، لا تحتاج حتى إلى إضافة فصل دراسي إلى DIV الأم.

هذا الحل متوافق إلى الخلف مع IE8 لذا لا داعي للقلق بشأن فشل المتصفحات القديمة.

الحل 2:

تم اقتراح تكييف على الحل 1 وهو كما يلي:

العرض التوضيحي: http://jsfiddle.net/wXaEH/162/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

يبدو أن هذا الحل يتناسب مع IE5.5 ولكنه غير مجرب.

الحل 3:

من الممكن أيضًا ضبط display: inline-block; width: 100%; لمضاهاة عنصر كتلة عادي أثناء عدم الانهيار.

عرض توضيحي: http://jsfiddle.net/SO_AMK/ae5ey/

CSS:

.clearfix {
    display: inline-block;
    width: 100%;
}

يجب أن يكون هذا الحل متوافقاً مع IE5.5 ولكن تم اختباره فقط في IE6.


أحد الحلول الأكثر شهرة هو اختلاف الحل رقم 3 الذي يستخدم عنصر زائف بدلاً من عنصر html غير دلالي.

انها شيء من هذا القبيل ...

.cf:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

يمكنك وضع ذلك في ورقة الأنماط الخاصة بك ، وكل ما تحتاجه هو إضافة الفئة "cf" إلى العنصر الذي يحتوي على العوامات.

ما أستخدمه هو شكل آخر يأتي من نيكولاس غالاغر.

إنها تفعل نفس الشيء ، لكنها أقصر ، تبدو أكثر حميدة ، وربما تستخدم لإنجاز شيء آخر مفيد للغاية - منع هوامش العناصر الفرعية من الانهيار مع والديها (ولكن من أجل ذلك تحتاج إلى شيء آخر - اقرأ المزيد عنه) هنا http://nicolasgallagher.com/micro-clearfix-hack/ ).

.cf:after {
    content: " ";
    display: table;
    clear: float;
}

أعتقد أن أفضل طريقة هي clear:both للعنصر القادم.

اليك السبب:

1) :after يكون المحدد غير مدعوم في IE6 / 7 والعربات التي تجرها الدواب في FF3 ،
إذا كنت تهتم فقط بـ IE8 + و FF3.5 + فقم بالتخلي عن: ما يليه هو الأفضل لك ...

2) من المفترض أن يفعل شيء آخر overflow لذلك لا يمكن الاعتماد على هذا الاختراق بما فيه الكفاية.

ملاحظة للمؤلف: لا يوجد شيء يكره التطهير ... المقاصة تعني تخطي الحقول العائمة. CLEAR معنا منذ HTML3 (من يدري ، وربما لفترة أطول) http://www.w3.org/MarkUp/html3/deflists.html ، ربما ينبغي عليه اختيار اسم مختلف قليلاً مثل الصفحة: جديد ، ولكن هذا مجرد تفاصيل ...


الحل المثالي سيكون استخدام inline-block للأعمدة بدلاً من floating. أعتقد أن دعم المستعرض جيد إذا اتبعت (أ) تطبيق inline-block فقط على العناصر التي تكون مضمنة عادة (على سبيل المثال span ) ؛ و (ب) add -moz-inline-box لمتصفح فايرفوكس.

تحقق من صفحتك في FF2 أيضًا لأنني واجهت الكثير من المشاكل عند تعشيق بعض العناصر (من المدهش أن هذه هي الحالة التي يعمل فيها IE بشكل أفضل بكثير من FF).


المشكلة الرئيسية التي قد تجدها مع تغيير الفائض إلى auto أو hidden هو أن كل شيء يمكن أن يصبح قابل للتمرير مع الماوس الأوسط buttom ويمكن للمستخدم خبط تخطيط الموقع بأكمله.


بدلا من وضع overflow:auto على الأم ، وطرح overflow:hidden

أول CSS أكتب لأي صفحة ويب يكون دائمًا:

div {
  overflow:hidden;
}

ثم لا داعي للقلق حول هذا الموضوع.


عادة ما أستخدم overflow: auto خدعة overflow: auto ؛ على الرغم من أن هذا ليس ، بالمعنى الدقيق للكلمة ، الاستخدام المقصود للتدفق ، فإنه مرتبط بالكتابة - بما يكفي لجعله سهل التذكر ، بالتأكيد. معنى float: left نفسها قد تم تمديدها لاستخدامات مختلفة أكثر أهمية من فيض في هذا المثال ، المنظمة البحرية الدولية.


على الرغم من أن الكود ليس ملفوًا تمامًا ، إلا أنني أعتقد أنه من السهل جدًا الحصول على ما أسميه "div div" في أسفل كل حاوية مع تعويمها. في الواقع ، لقد قمت بتضمين قاعدة النمط التالية في مقطع إعادة تعيين كل مشروع:

.clear 
{
   clear: both;
}

إذا كنت ترغب في استخدام IE6 (يساعدك الله) ، فقد ترغب في إعطاء هذه القاعدة ارتفاعًا وارتفاعًا بمقدار 0px أيضًا.


قم بإضافة هذا في div الأصل في الأسفل

 <div style="clear:both"></div>

هناك إصدارات عديدة من Clearfix ، مع نيكولاس غالاغر وتييري كوبلنتز كمؤلفين رئيسيين.

إذا كنت تريد دعم المستعرضات الأقدم ، فمن الأفضل استخدام هذا الإصلاح الواضح:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

في SCSS ، يجب عليك استخدام التقنية التالية:

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

إذا كنت لا تهتم بالدعم للمتصفحات القديمة ، فهناك إصدار أقصر:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

ومن الحلول الممكنة الأخرى التي أعتقد أنها أكثر منطقية بشكل صحيح هو تغيير العناصر الداخلية المغلفة لتكون "عرض: مضمنة". هذا المثال وما كنت أعمل عليه عندما صادفت هذه الصفحة كلاهما يستخدمان divs معماة بنفس الطريقة التي سيتم بها استخدام الامتداد. بدلاً من استخدام divs ، قم بالتبديل إلى الامتداد ، أو إذا كنت تستخدم عنصرًا آخر يكون بشكل افتراضي "display: block" بدلاً من "display: inline" ثم تغييره ليكون "display: inline". أعتقد أن هذا هو الحل الصحيح لغويا 100٪.

الحل 1 ، عائم الأصل ، هو في الأساس لتغيير المستند بأكمله ليتم تعويمه.

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

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

الحل 4 ، overflow: auto ، هو اعتراف أنك لا تعرف كيفية وضع المستند وأنك تعترف أنك لا تعرف ما يجب فعله.







css-float