ما أساليب 'clearfix' يمكنني استخدامها ؟

Question

لدي مشكلة قديمة من div لف تخطيط عمودين.الشريط الجانبي الخاص بي هو طرح لذا الحاويات div فشل التفاف المحتوى و الشريط الجانبي.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

يبدو أن هناك العديد من طرق تحديد علة واضحة في فايرفوكس:

• <br clear="all"/>
• overflow:auto
• overflow:hidden

في الحالة الوحيدة التي يبدو للعمل بشكل صحيح هو <br clear="all"/> الحل الذي هو قليلا ضيع. overflow:auto يعطيني سيئة التمرير ، overflow:hidden بالتأكيد يجب أن يكون لها آثار جانبية.أيضا, IE7 على ما يبدو لا يعانون من هذه المشكلة بسبب السلوك غير صحيحة ، ولكن في حالة انها تعاني نفس فايرفوكس.

طريقة المتاحة لنا حاليا هو الأكثر قوة?

Answer 1

اعتمادًا على التصميم الذي يتم إنتاجه، فإن كل حل من حلول CSS الواضحة أدناه له فوائده الخاصة.

يحتوي Clearfix على تطبيقات مفيدة ولكن تم استخدامه أيضًا كاختراق.قبل أن تستخدم أداة Clearfix، ربما تكون حلول CSS الحديثة هذه مفيدة:

• css فليكس بوكس
• شبكة المغلق

---

حلول Clearfix الحديثة

---

حاوية مع overflow: auto;

إن أبسط طريقة لمسح العناصر العائمة هي استخدام النمط overflow: auto على العنصر المحتوي.يعمل هذا الحل في كل المتصفحات الحديثة.

<div style="overflow: auto;">
  <img
    style="float: right;"
    src="path/to/floated-element.png"
    width="500"
    height="500"
  > 
  <p>Your content here…</p>
</div>

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

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

ملحوظة: العنصر العائم هو img العلامة في هذا المثال، ولكن يمكن أن تكون أي عنصر HTML.

---

تم إعادة تحميل Clearfix

كتب تييري كوبلينتز على CSSMojo: تم إعادة تحميل أحدث Clearfix.وأشار إلى أنه من خلال إسقاط الدعم لـ oldIE، يمكن تبسيط الحل إلى عبارة CSS واحدة.بالإضافة إلى ذلك، باستخدام display: block (بدلاً من display: table) يسمح للهوامش بالانهيار بشكل صحيح عندما تكون العناصر ذات الإصلاح الواضح شقيقة.

.container::after {
  content: "";
  display: block;
  clear: both;
}

هذه هي النسخة الأحدث من Clearfix.

---

⋮

⋮

حلول Clearfix الأقدم

الحلول التالية ليست ضرورية للمتصفحات الحديثة، ولكنها قد تكون مفيدة لاستهداف المتصفحات القديمة.

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

وهي مدرجة تقريبًا بالترتيب الزمني.

---

"Beat That ClearFix"، وهو حل واضح للمتصفحات الحديثة

تييري كوبلينتز CSS موجو وقد أشار إلى أنه عند استهداف المتصفحات الحديثة، يمكننا الآن إسقاط zoom و ::before الممتلكات/القيم واستخدم ببساطة:

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

هذا الحل لا يدعم IE 6/7... عن قصد!

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

---

مايكرو كليرفيكس

أحدث الحلول الواضحة والمعتمدة عالميًا، Micro Clearfix بواسطة نيكولاس غالاغر.

الدعم المعروف:فايرفوكس 3.5+، سفاري 4+، كروم، أوبرا 9+، IE 6+

.container::before, .container::after {
  content: "";
  display: table;
}
.container::after {
  clear: both;
}
.container {
  zoom: 1;
}

---

خاصية التجاوز

تُفضل هذه الطريقة الأساسية في الحالة المعتادة، عندما لا يظهر المحتوى الموضوع خارج حدود الحاوية.

http://www.quirksmode.org/css/clearing.html - يشرح كيفية حل المشكلات الشائعة المتعلقة بهذه التقنية، وهي الإعداد width: 100% على الحاوية.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

بدلاً من استخدام display الخاصية لتعيين "hasLayout" لـ IE، يمكن استخدام خصائص أخرى من أجلها تشغيل "hasLayout" لعنصر ما.

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

هناك طريقة أخرى لمسح العوامات باستخدام overflow الخاصية هي استخدام الشرطة السفلية hack.سوف يقوم IE بتطبيق القيم المسبوقة بالشرطة السفلية، ولن تفعل ذلك المتصفحات الأخرى.ال zoom مشغلات الملكية hasLayout في آي إي:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

بينما يعمل هذا...انها ليست مثالية لاستخدام الخارقة.

---

فطيرة:طريقة المقاصة سهلة

تتمتع طريقة "المسح السهل" القديمة هذه بميزة السماح للعناصر الموضوعة بالتعليق خارج حدود الحاوية، على حساب CSS الأكثر صعوبة.

هذا الحل قديم جدًا، ولكن يمكنك معرفة كل شيء عن Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html

---

عنصر يستخدم خاصية "مسح".

الحل السريع والقذر (مع بعض العيوب) عندما تقوم بدمج شيء ما معًا بسرعة:

<br style="clear: both" /> <!-- So dirty! -->

العيوب

• إنه غير مستجيب وبالتالي قد لا يوفر التأثير المطلوب إذا تغيرت أنماط التخطيط بناءً على استعلامات الوسائط.الحل في CSS النقي هو الأكثر مثالية.
• ويضيف ترميز html دون إضافة أي قيمة دلالية بالضرورة.
• يتطلب تعريفًا وحلاً مضمنين لكل مثيل بدلاً من مرجع فئة لحل واحد لـ "clearfix" في CSS ومراجع الفئة إليه في HTML.
• إنه يجعل من الصعب التعامل مع التعليمات البرمجية للآخرين حيث قد يضطرون إلى كتابة المزيد من الاختراقات للتغلب عليها.
• في المستقبل، عندما تحتاج/ترغب في استخدام حل Clearfix آخر، لن تضطر إلى الرجوع وإزالة كل حل <br style="clear: both" /> العلامة متناثرة حول العلامات.

Answer 2

ما هي المشاكل التي نحاول حلها؟

هناك نوعان من الاعتبارات الهامة عند الأشياء العائمة:

1. تحتوي على عوامات سليل. هذا يعني أن العنصر المعني يجعل نفسه طويلًا بما يكفي ليشمل جميع السلالات العائمة.(إنهم لا يتعطلون في الخارج.)

   

2. عزل أحفاد من العوامات الخارجية. هذا يعني أن المتحدرين داخل العنصر يجب أن يكونوا قادرين على الاستخدام clear: both وجعلها لا تتفاعل مع العوامات خارج العنصر.

   

حظر سياقات التنسيق

هناك طريقة واحدة فقط للقيام بكلا الأمرين.وذلك لإنشاء جديد سياق التنسيق كتلة.العناصر التي تنشئ سياق تنسيق الكتلة عبارة عن مستطيل معزول تتفاعل فيه العوامات مع بعضها البعض.سيكون سياق تنسيق الكتلة دائمًا طويلًا بما يكفي للالتفاف بصريًا على أحفاده العائمة، ولا يجوز أن تتفاعل أي عوامات خارج سياق تنسيق الكتلة مع العناصر الموجودة بداخله.هذا العزل ثنائي الاتجاه هو بالضبط ما تريده.في IE، يسمى هذا المفهوم نفسه hasLayout, ، والتي يمكن ضبطها عبر zoom: 1.

هناك عدة طرق لإنشاء سياق تنسيق الكتلة، لكن الحل الذي أوصي به هو display: inline-block مع width: 100%.(بالطبع هناك التحذيرات المعتادة مع استخدام width: 100%, ، لذا استخدم box-sizing: border-box أو وضع padding, margin, ، و border على عنصر مختلف.)

الحل الأقوى

ربما يكون التطبيق الأكثر شيوعًا للعوامات هو التخطيط المكون من عمودين.(يمكن تمديدها إلى ثلاثة أعمدة.)

أولا هيكل العلامات.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

والآن CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

جربها بنفسك

اذهب إلى شبيبة بن للتلاعب بالكود ومعرفة كيفية إنشاء هذا الحل من الألف إلى الياء.

تعتبر طرق الإصلاح التقليدية ضارة

المشكلة مع التقليدية com.clearfix حلول هو أنهم يستخدمون مفهومين مختلفين للعرض لتحقيق نفس الهدف لشركة IE والجميع.في IE يستخدمون hasLayout لإنشاء سياق تنسيق كتلة جديد، ولكن بالنسبة لأي شخص آخر يستخدمون المربعات التي تم إنشاؤها (:after) مع clear: both, ، والذي لا ينشئ سياق تنسيق كتلة جديد.وهذا يعني أن الأمور لن تتصرف بنفس الطريقة في جميع المواقف.للحصول على شرح لماذا هذا سيء، راجع كل ما تعرفه عن Clearfix خاطئ.

Answer 3

المعيار الجديد كما هو مستخدم من قبل إنويت.css و بوربون - إطاران من إطارات CSS/Sass مستخدمان على نطاق واسع ويتم صيانتهما جيدًا:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

---

ملحوظات

ضع في اعتبارك أن الإصلاحات الواضحة هي في الأساس اختراق لما يمكن أن توفره تخطيطات flexbox الآن في ملف طريقة أكثر ذكاءً.تم تصميم عوامات CSS في الأصل لتدفق المحتوى المضمّن - مثل الصور في مقالة نصية طويلة - وليس لتخطيطات الشبكة وما شابه.إذا كان لديك المتصفحات المستهدفة تدعم flexbox, ، الأمر يستحق النظر فيه.

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

وكان هذا واضحا أعلنها وشرحها تييري كوبلينتز في يوليو 2012.يتخلص من الوزن غير الضروري نيكولاس غالاغر 2011 micro-clearfix.وفي هذه العملية، فإنه يحرر عنصرًا زائفًا لاستخدامك الخاص.تم تحديث هذا للاستخدام display: block بدلا من display: table (مرة أخرى، الفضل لتييري كوبلينتز).

Answer 4

أوصي باستخدام ما يلي، وهو مأخوذ من http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

Answer 5

يمكن استخدام الخاصية overflow لمسح العوامات بدون أي علامات إضافية:

.container { overflow: hidden; }

يعمل هذا مع جميع المتصفحات باستثناء IE6، حيث كل ما عليك فعله هو تمكين hasLayout (التكبير هو الطريقة المفضلة لدي):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html

Answer 6

لقد وجدت خطأً في طريقة CLEARFIX الرسمية:لا تحتوي DOT على حجم خط.وإذا قمت بتعيين height = 0 والعنصر الأول في DOM-Tree الخاص بك يحتوي على فئة "clearfix" وسيكون لديك دائمًا هامش في أسفل الصفحة يبلغ 12 بكسل :)

عليك إصلاحه مثل هذا:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

إنه الآن جزء من تخطيط YAML ...مجرد إلقاء نظرة عليه - إنه مثير للاهتمام للغاية!http://www.yaml.de/en/home.html

Answer 7

هذا هو ضخم جدا الحل:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

ومن المعروف أن تعمل في فايرفوكس 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

بما في ذلك :قبل محدد ليس من الضروري لمسح العوامات ، ولكن يمنع من أعلى هوامش من الانهيار في المتصفحات الحديثة.هذا يضمن أن هناك التناسق البصري مع أي 6/7 عند التكبير:1 تطبيقها.

من http://nicolasgallagher.com/micro-clearfix-hack/

Answer 8

Clearfix من bootstrap:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

Answer 9

أنا فقط استخدم :-

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

يعمل بشكل أفضل ومتوافق مع IE8+ :)

Answer 10

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

ابتعد عن العوامات كلما أمكن ذلك

ومن الجدير بالذكر أنني أتجنب العوامات مثل الإيبولا.هناك أسباب كثيرة وأنا لست وحدي.اقرأ إجابة ريكودو عنه ما هو واضح وسترى ما أعنيه.في كلماته: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

هناك خيارات أخرى جيدة (وأحيانًا أفضل) بخلاف العوامات.ومع تقدم التكنولوجيا وتحسنها، flexbox (والطرق الأخرى) سيتم اعتمادها على نطاق واسع وستصبح العوامات مجرد ذكرى سيئة.ربما CSS4؟

---

تعويم سوء السلوك وفشل مسح

أولاً، في بعض الأحيان، قد تعتقد أنك في مأمن من العوامات حتى يتم ثقب منقذ حياتك ويبدأ تدفق HTML الخاص بك في الانخفاض:

في الكودبن http://codepen.io/omarjuvera/pen/jEXBya أدناه، ممارسة مسح العوامة باستخدام <div classs="clear"></div> (أو أي عنصر آخر) أمر شائع ولكنه مستهجن ومعادٍ للدلالات.

<div class="floated">1st</div>
<div class="floated">2nd</div>
<div class="floated">3nd</div>
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

div {
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

div.floated {
    float: left;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

لكن, ، فقط عندما كنت تعتقد أن طفوك يستحق الإبحار... بوم!عندما يصبح حجم الشاشة أصغر فأصغر، ترى سلوكيات غريبة مثل الرسم أدناه (Same http://codepen.io/omarjuvera/pen/jEXBya):

لماذا يجب أن تهتم؟لست متأكدًا من الرقم الدقيق ولكن حوالي 80% (أو أكثر) من الأجهزة المستخدمة هي أجهزة محمولة ذات شاشات صغيرة.لم تعد أجهزة الكمبيوتر المكتبية/أجهزة الكمبيوتر المحمولة هي الملك.

---

لا تنتهي هنا

هذه ليست المشكلة الوحيدة مع العوامات.هناك الكثير، ولكن في هذا المثال، قد يقول البعض all you have to do is to place your floats in a container.ولكن كما ترون في com.codepen والرسوم البيانية، وهذا ليس هو الحال.يبدو أنه جعل الأمور أسوأ:

لغة البرمجة

<div id="container" class="">
  <div class="floated">1st</div>
  <div class="floated">2nd</div>
  <div class="floated">3nd</div>
</div> <!-- /#conteiner -->
<div classs="clear"></div> <!-- Acts as a wall -->
<section>Below</section>

CSS

#container {
  min-height: 100px; /* To prevent it from collapsing */
  border: 1px solid #0f0;
}
.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}

.clear {
    clear: both;
}
section {
    border: 1px solid #f0f;
}

أما بالنسبة للنتيجة؟

هو نفسه!

على الأقل، ستبدأ حفلة CSS، وستدعو جميع أنواع المحددات والخصائص إلى الحفلة؛إحداث فوضى أكبر في CSS الخاص بك عما بدأت به.فقط لإصلاح تعويم الخاص بك.

---

CSS Clearfix للإنقاذ

هذه القطعة البسيطة والقابلة للتكيف للغاية من CSS هي قطعة جميلة و"منقذة":

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

هذا كل شيء!إنه يعمل حقًا دون كسر الدلالات، وقد ذكرت ذلك إنها تعمل؟:

من نفس العينة...لغة البرمجة

<div class="clearfix">
    <div class="floated">1st</div>
    <div class="floated">2nd</div>
    <div class="floated">3nd</div>
</div>
<section>Below</section>

CSS

div.floated {
    float: left;
    border: 1px solid #f00;
    width: 200px;
    height: 100px;
}
section {
        border: 4px solid #00f;
}


.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

---

الآن لم نعد بحاجة <div classs="clear"></div> <!-- Acts as a wall --> وإبقاء الشرطة الدلالية سعيدة.هذه ليست الفائدة الوحيدة.يستجيب هذا Clearfix لأي حجم شاشة دون استخدام @media في أبسط صوره.وبعبارة أخرى، فإنه سوف يحافظ على الحاوية العائمة الخاصة بك تحت المراقبة ويمنع الفيضانات.وأخيرًا، فهو يوفر الدعم للمتصفحات القديمة في قطعة واحدة صغيرة للكاراتيه =)

ها هو الإصلاح الواضح مرة أخرى

.clearfix:before, .clearfix:after { 
    content: "";
    display: table;
    clear: both;
    zoom: 1; /* ie 6/7 */
}

Answer 11

أقوم دائمًا بتعويم الأقسام الرئيسية لشبكتي والتقدم بطلب clear: both; إلى التذييل.هذا لا يتطلب div أو فئة إضافية.

Answer 12

بصدق؛يبدو أن جميع الحلول عبارة عن اختراق لإصلاح خطأ في العرض ...هل انا مخطئ؟

لقد وجدت <br clear="all" /> ليكون الأسهل والأبسط.رؤية class="clearfix" في كل مكان لا يمكن أن يداعب مشاعر الشخص الذي يعترض على عناصر ترميزية غريبة، أليس كذلك؟أنت فقط ترسم المشكلة على لوحة مختلفة.

أنا أيضا استخدم display: hidden الحل، وهو أمر رائع ولا يتطلب أي إعلانات فئة إضافية أو علامات HTML ...ولكن في بعض الأحيان تحتاج إلى العناصر لتجاوز الحاوية، على سبيل المثال.شرائط وأوشحة جميلة

Answer 13

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

Answer 14

لقد جربت كل هذه الحلول، وسيتم إضافة هامش كبير إليها <html> العنصر تلقائيًا عندما أستخدم الكود أدناه:

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

وأخيرا، قمت بحل مشكلة الهامش عن طريق إضافة font-size: 0; إلى CSS أعلاه.

Answer 15

مع SASS، يكون الإصلاح الواضح هو:

@mixin clearfix {
    &:before, &:after {
        content: '';
        display: table;
    }
    &:after {
        clear: both;
    }
    *zoom: 1;
}

ويتم استخدامه مثل:

.container {
    @include clearfix;
}

إذا كنت تريد الإصلاح الجديد:

@mixin newclearfix {
    &:after {
        content:"";
        display:table;
        clear:both;
    }
}

Answer 16

مع أقل (http://lesscss.org/)، يمكن للمرء إنشاء مساعد واضح مفيد:

.clearfix() {
  zoom: 1;
  &:before { 
    content: ''; 
    display: block; 
  }
  &:after { 
    content: ''; 
    display: table; 
    clear: both; 
  }
}

ثم استخدمه مع الحاويات التي بها مشاكل، على سبيل المثال:

<!-- HTML -->
<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

/* LESS */
div#container {
  .clearfix();
}

Answer 17

استخدام overflow:hidden/auto وسيكون الارتفاع لـ ie6 كافيًا إذا كانت الحاوية العائمة تحتوي على عنصر أصل.

يمكن أن يعمل أي من الاختبارين، حيث يقوم HTML المذكور أدناه بمسح العوامات.

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

في الحالات التي يرفض فيها هذا العمل مع ie6، ما عليك سوى تعويم الأصل لمسح التعويم.

#test {
  float: left; // using float to clear float
  width: 99%;
}

لم تكن بحاجة حقًا إلى أي نوع آخر من المقاصة حتى الآن.ربما هذه هي الطريقة التي أكتب بها HTML الخاص بي.

Answer 18

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

نفس الشيء مع الغلاف، ستحتاج إلى جعله سياق تنسيق كتلة لتغليف العمودين.

تشير هذه المقالة إلى بعض المشغلات التي يمكنك استخدامها:حظر سياقات التنسيق.

Answer 19

أ clearfix هو وسيلة عنصر تلقائيا واضحة بعد نفسها ، بحيث لا تحتاج لإضافة المزيد من العلامات.

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.cleaner {
  clear: both;
}

عادة كنت بحاجة إلى القيام بشيء ما على النحو التالي:

<div style="float: left;">Sidebar</div>
<div class="cleaner"></div> <!-- Clear the float -->

مع clearfix ، تحتاج فقط إلى

<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->

Answer 20

تظهر قيمة عرض جديدة للمهمة في سطر واحد.

display: flow-root;

من مواصفات w3:"يقوم العنصر بإنشاء مربع حاوية كتلة، ويضع محتوياته باستخدام تخطيط التدفق.فهو ينشئ دائمًا سياق تنسيق كتلة جديدًا لمحتوياته."

معلومة:https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

※كما هو موضح في الرابط أعلاه، الدعم محدود حاليًا لذا قد يكون الدعم الاحتياطي كما هو موضح أدناه مفيدًا:https://github.com/fliptheweb/postcss-flow-root

Answer 21

لماذا تحاول استخدام css هاك أن تفعل ما 1 خط HTML القيام بهذه المهمة.و لماذا لا تستخدم الدلالي html تو ضع فاصل للعودة إلى الخط ؟

فو لي هو حقا الأفضل استخدام :

<br style="clear:both" />

و إذا كنت لا تريد أي نمط في html الخاص بك لديك فقط لاستخدام فئة كسر الخاص بك ووضع .clear { clear:both; } في CSS الخاص بك.

الاستفادة من هذا:

• الدلالي استخدام html العودة إلى خط
• إذا لا CSS الحمل سيكون العامل
• لا حاجة اضافية كود CSS و هاك
• لا تحتاج إلى محاكاة br مع CSS, انها موجودة بالفعل في HTML

Answer 22

بافتراض أنك تستخدم بنية HTML هذه:

<div id="container">
  <div id="content">
  </div>
  <div id="sidebar">
  </div>
</div>

إليك CSS الذي سأستخدمه:

div#container {
    overflow: hidden;    /* makes element contain floated child elements */
}

div#content, div#sidebar {
    float: left;
    display: inline;    /* preemptively fixes IE6 dobule-margin bug */
}

أستخدم هذه المجموعة طوال الوقت وهي تعمل بشكل جيد بالنسبة لي، حتى في IE6.

Answer 23

أنا دائما استخدم مايكرو واضح :

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

في إطار تتالي حتى أنني أقوم بتطبيقه افتراضيًا على عناصر مستوى الكتلة.IMO، وتطبيقه افتراضيًا على عناصر مستوى الكتلة يمنح عناصر مستوى الكتلة سلوكًا بديهيًا أكثر من سلوكهم التقليدي.كما أنه جعل من السهل جدًا بالنسبة لي إضافة دعم للمتصفحات القديمة إلى Cascade Framework (الذي يدعم IE6-8 بالإضافة إلى المتصفحات الحديثة).

Answer 24

على عكس الإصلاحات الواضحة الأخرى، هنا إصلاح مفتوح بدون حاويات

تتطلب الإصلاحات الواضحة الأخرى إما أن يكون العنصر العائم في حاوية محددة جيدًا أو تحتاج إلى حاوية إضافية فارغة لغويًا <div>.وعلى العكس من ذلك، يتطلب الفصل الواضح بين المحتوى والترميز حل CSS صارم لهذه المشكلة.

مجرد حقيقة أن المرء يحتاج إلى وضع علامة على نهاية العوامة، لا يسمح بذلك تنضيد CSS غير المراقب.

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

ولهذا السبب أستخدم الوضوح التالي مع العناوين الجديدة:

h1 {
    clear: both;
    display: inline-block;
    width: 100%;
}

يتم استخدام هذا الحل على نطاق واسع موقع الويب الخاص بي لحل المشكلة:النص المجاور للمنمنمة العائمة قصير ولا يتم احترام الهامش العلوي لكائن المقاصة التالي.

كما أنه يمنع أي تدخل يدوي عند التوليد التلقائي ملفات PDF من الموقع.هنا صفحة المثال.

Answer 25

يمكنك أيضًا وضع هذا في CSS الخاص بك:

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

وأضف الفئة "cb" إلى div الأصلي الخاص بك:

<div id="container" class="cb">

لن تحتاج إلى إضافة أي شيء آخر إلى الكود الأصلي الخاص بك...

Answer 26

#content{float:left;}
#sidebar{float:left;}
.clear{clear:both; display:block; height:0px; width:0px; overflow:hidden;}

<div id="container">
  <div id="content">text 1 </div>
  <div id="sidebar">text 2</div>
  <div class="clear"></div>
</div>

Answer 27

هل جربت هذا:

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

لم أواجه أي مشاكل مع هذه الطريقة.

Answer 28

طريقتي المفضلة هي إنشاء فئة Clearfix في مستند css/scss الخاص بي على النحو التالي

.clearfix{
    clear:both
}

ثم اتصل به في مستند html الخاص بي كما هو موضح أدناه

<html>
  <div class="div-number-one">
    Some Content before the clearfix
  </div>

  <!-- Let's say we need to clearfix Here between these two divs --->
  <div class="clearfix"></div>

  <div class="div-number-two">
    Some more content after the clearfix
  </div>
</html>