क्लीयरफिक्स: फोर्स एलीमेंट टू सेल्फ-क्लियर इट्स चिल्ड्रन - सीएसएस-ट्रिक्स

यह आप इन दिनों ठीक करेंगे (IE 8 और ऊपर):

.group:after ( content: ""; display: table; clear: both; )

इसे किसी भी मूल तत्व पर लागू करें जिसमें आपको फ़्लोट्स को साफ़ करने की आवश्यकता है। उदाहरण के लिए:

आप इसका उपयोग
माता-पिता के तल पर कुछ के साथ फ्लोट को साफ़ करने के बजाय (आसान भूलने के लिए, सीएसएस, गैर-शब्दार्थ में सही नहीं) या overflow: hidden;माता-पिता पर कुछ का उपयोग करने के बजाय करेंगे (आप हमेशा अतिप्रवाह छिपाना नहीं चाहते हैं ) है।

अब थोड़ा इतिहास के लिए!

यह मूल लोकप्रिय संस्करण था, जो संभवतः अब तक ब्राउज़रों का समर्थन करने के लिए डिज़ाइन किया गया था:

.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */

इसके बाद जेफ स्टार द्वारा यहाँ एक क्लीनर संस्करण का दस्तावेजीकरण किया गया था, इस तथ्य के आधार पर कि कोई भी मैक के लिए IE का उपयोग नहीं करता है, जो कि बैकस्लैश हैक था।

.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */

तब यह एक वर्ग के नाम के रूप में "समूह" का उपयोग करने के लिए लोकप्रिय हो गया, जो अच्छे और अधिक अर्थ (डैन सेडरहोम के माध्यम से) है। इसके अलावा, contentसंपत्ति को स्थान की आवश्यकता भी नहीं है, यह खाली स्ट्रिंग (निकोलस गैलाघर के माध्यम से) हो सकता है। फिर, बिना किसी पाठ के, font-sizeसंयुक्त राष्ट्र की जरूरत है (क्रिस कॉयर)।

.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */

बेशक, यदि आप IE 6 या 7 समर्थन को छोड़ते हैं, तो संबंधित लाइनों को हटा दें।

18 मई, 2011 को अपडेट करें: निकोलस गैलाघर फिर से "सूक्ष्म" क्लीयरफिक्स के साथ। यह अतिरिक्त सामान भी देखें।

.group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )

क्लीयरफिक्स के सबसे आधुनिक संस्करण के लिए इस पृष्ठ का शीर्ष देखें।

भविष्य में, हम ऐसा करने में सक्षम हो सकते हैं:

.group ( display: flow-root; )