معاد تحميل clearfix + فيض: مخفي بسط

27 سبتمبر 2010 في 06:27 صباحا بواسطة Koblentz تييري | في CSS 101 | 12 تعليقات

نبذة عن الكاتب: تييري Koblentz هو مهندس الأمامية في ياهو!
انه يملك TJK التصميم و EZ-css.org . يمكنك اتباع تييري على التغريد في thierrykoblentz @ .

clearfix و overflow : hidden قد تكون التقنيات هما الاكثر شعبية لمسح يطفو بدون توصيف الهيكلية.

هذه المقالة القصيرة هو حول تعزيز الأسلوب الأول وتسليط بعض الضوء على المعنى الحقيقي للثاني.

clearfix

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

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

لذلك، لإنشاء تخطيط المربع نفسه عبر المتصفحات يمكننا تحسين طريقة الأصلي من خلال توليد محتوى باستخدام كل العناصر الزائفة :before و :after : 

  . clearfix: قبل،
 . clearfix: بعد {
   المحتوى:؛ "."    
   عرض: كتلة؛    
   ارتفاع: 0؛    
   الفائض: خفي؛	
 }
 . clearfix: بعد {واضحة: على حد سواء؛}
 . clearfix {التكبير: 1؛} / * IE <8 * /

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

overflow

في معظم المناقشات حول تبادل المعلومات يطفو على overflow:hidden طريقة حتى يأتي، ويتم اطلاق النار عليه دائما من قبل " اذا كنت تريد وضع العناصر المتمركزة على الاطلاق داخل DIV، فإنك سوف تكون قطع من هذه العناصر ". لكن هذا ليس ضروريا صحيح. overflow:hidden وسوف كليب دائما العناصر المتمركزة نسبيا، لكنه لن يخفي دائما تلك المتمركزة على الاطلاق. وذلك لأن كل هذا يتوقف على كتلة وعلى متنها:

10.1 تعريف "كتلة تحتوي على":

4. إذا كان العنصر له "الموقف: المطلقة"، يتم تأسيس كتلة محتوية على أقرب سلف مع موقف ' من 'المطلق'، 'النسبية' أو 'ثابت'، ...

وهذا يعني وضع العناصر على الاطلاق وسوف تظهر من خارج مربع على غرار مع overflow:hidden إلا كتلة من المحتوية هي نفسها خانة أو عنصر داخل منطقة الجزاء قال.

ويمكنك التحقق من هذه الصفحة عرض لمعرفة كيفية عمل الأشياء.

بدائل أفضل

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

  العرض: مضمنة لبنة؛
 عرض: value> صريح <any؛

لمزيد من القراءة

العثور على المحادثات: المدونات | technorati

تقاسم وتوسيع نطاق: مع الإشارة المرجعية متواجد حاليا | يسو أنها! | صديق!

12 تعليقات

  1. شكرا للفيضان: إزالة الغموض خفية. وأميل إلى استخدام الفائض: مخفي كما الافتراضي الخاص بي حل "clearfix"، ولكن أحيانا اضطررت الى اختيار واحد آخر (أو اعتقدت انني كان علي) لأنه من العناصر المتمركزة على الاطلاق خارج منطقة الجزاء. الآن وأنا أعلم أنه أكثر دهاء مما كنت اعتقد.

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

    تعليق من قبل خامسا فلوران - 27 سبتمبر 2010 #

  2. هذه نقطة جيدة. أنا متأكد من أن الكثير من الناس الذين كنت تستخدم العرض: جدول أو العرض: الجدول الخلايا لا يعرفون شيئا عن هذا القيد.

    شكرا لملاحظاتك.

    تعليق بواسطة Koblentz تييري - 28 سبتمبر 2010 #

  3. هل أعمالك "البديل الافضل" في IE6، IE7، IE8؟

    تعليق بواسطة خورخي Epuñan - 30 سبتمبر 2010 #

  4. @ خورخي

    نعم فهو، في الواقع كان يعمل في شركة آي إي 5.0 +

    المنطق هو أنه في أي 5،6،7 عرض واضح يؤدي hasLayout في حين أن "مضمنة كتلة" يخلق سياق التنسيق كتلة في أي 8 و المتصفحات الحديثة الأخرى.

    العرض هو المفتاح لجعل الأشياء تعمل في جميع المجالات رغم ذلك، منذ مربعات تسمى ب "مضمنة كتلة" الختامية يتقلص.

    هذا هو السبب في أن يقول المقال: "إذا كان يمكنك تطبيق عرض للعنصر التي تحتوي على عوامات ..."

    تعليق بواسطة Koblentz تييري - 1 أكتوبر 2010 #

  5. لعبت حوالي مع استخدام العرض: مضمنة لبنة وعرض لكني وجدت بعض الخلل.

    وإذا كان هناك مسافة بين divs أن أظهرت أنها مسافة بين divs.
    المحاذاة العمودية هي الجحيم. @ تييري كيف يمكن استخدامه؟

    نلقي نظرة على محاولة لي هنا http://jsfiddle.net/UZr7L/

    تعليق بواسطة Lajlev مايكل - 10 أكتوبر 2010 #

  6. @ مايكل

    أنا لا أستعمل على العناصر التي الأشقاء (على الأقل ليس للتخطيط)، ولكن لاحظ أن ما كنت تعاني من ليست البق.
    صفقات YUI شبكة 3 مع هذه الرسالة، باستخدام تباعد المسافات وكلمة (قيم سالبة).

    تعليق بواسطة Koblentz تييري - 11 أكتوبر 2010 #

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

    بفضل دارين لرفع قضية :)

    تعليق بواسطة Koblentz تييري - 22 أكتوبر 2010 #

  8. على ما يبدو، وذلك باستخدام content: "020" لclearfix ، بل هو أفضل

    تعليق بواسطة unwiredbrain - 28 أكتوبر 2010 #

  9. أوتش! يمضغ ورد قانون بلدي!

    كان content: " backslash zero zero two zero "

    تعليق بواسطة unwiredbrain - 28 أكتوبر 2010 #

  10. @ unwiredbrain

    كنت في اشارة الى الاسلوب الذي يستخدم "الرؤية: مخفي"، ولكن ما الذي أستخدمه هو "تجاوز: المخفية" لذلك ينبغي أن لا فرق.

    شكرا لملاحظاتك

    تعليق بواسطة Koblentz تييري - 28 أكتوبر 2010 #

  11. أوه. يجب أن يكون في حيرة من أمري بين الاثنين. آسف لذلك.

    تعليق بواسطة unwiredbrain - 28 أكتوبر 2010 #

  12. بارع. أنا استخدم هذا على كل مشروع الآن كجزء من بويليربليت HTML5. أنا لا أستعمل كل من المتداول، ولكن. clearfix يأتي دائما في متناول اليد. شكرا!

    تعليق بواسطة YJ - 10 مايو 2011 #

آسف، يتم إغلاق شكل تعليق في هذا الوقت.

استضاف برنامج رائع

جميع الحقوق محفوظة © 2006-2012 ياهو! جميع الحقوق محفوظة. سياسة الخصوصية - شروط الخدمة

مدعوم من وورد في ياهو! استضافة المواقع .