दिलचस्प पोस्ट
".equals" और "==" के बीच अंतर क्या है? एक कॉलम (लम्बी प्रारूप) में माप स्तंभ (चौड़े प्रारूप) के एकाधिक सेटों को फिर से करना किसी स्ट्रिंग में ऑब्जेक्ट को सीरियल करना कैसे करें HTML5 लोकल स्टोरेज बनाम सत्र का भंडारण आर में विखंडों में सदिश को विभाजित करें डीआईवी के बजाय टेबल्स Java String.equals बनाम == विज़ुअल स्टूडियो प्रोजेक्ट प्रॉपर्टी में विभिन्न "बिल्ड एक्शन" सेटिंग्स क्या हैं और वे क्या करते हैं? फ़ंक्शन का प्रयोग करके दो तिथियों के बीच की तारीखों की एक सूची प्राप्त करें MySQL के साथ औसत गणना करने का आसान तरीका मेकफाइल, मैं उनका उपयोग कैसे कर सकता हूं? iPhone ऐप> आवाज मान्यता जोड़ें? जावास्क्रिप्ट में यादृच्छिक संख्या जनरेटर सीडिंग जावास्क्रिप्ट में बच्चों और बच्चों के बीच अंतर क्या है? रनटाइम में एक नौ पैच / नैनपैच ड्रायवेट बनाएँ

'क्लीनफिक्स' के किस तरीकों का मैं उपयोग कर सकता हूं?

मेरे पास दो-स्तंभ लेआउट लपेटने वाले एक div की उम्र की पुरानी समस्या है I मेरी साइडबार चालू है, इसलिए मेरा कंटेनर 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 निश्चित रूप से साइड इफेक्ट्स होने चाहिए साथ ही, आईई 7 को गलत तरीके से इस समस्या से ग्रस्त नहीं होना चाहिए, लेकिन मेरी स्थिति में यह फ़ायरफ़ॉक्स के समान है।

वर्तमान में हमारे लिए कौन सी विधि उपलब्ध है सबसे मजबूत?

वेब के समाधान से एकत्रित समाधान "'क्लीनफिक्स' के किस तरीकों का मैं उपयोग कर सकता हूं?"

डिज़ाइन के आधार पर डिज़ाइन के आधार पर, प्रत्येक नीचे दिए गए स्पष्टफ़िक्स सीएसएस समाधानों के अपने लाभ हैं।

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

  • सीएसएस फ्लेक्सबॉक्स
  • सीएसएस ग्रिड

आधुनिक क्लीनफिक्स सॉल्यूशंस


overflow: auto; साथ कंटेनर overflow: auto;

शुरुआती तत्वों को साफ करने का सरलतम तरीका शैली overflow: auto का उपयोग कर रहा है 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 तत्व हो सकता है


साफ़फिक्स रीलोडेड

सीएसएसएमोजो पर थियरी कोब्लेंटज़ ने लिखा: बहुत ही नवीनतम साफ़फ़िक्स पुनः लोड किया गया । उन्होंने कहा कि पुराने आईई के समर्थन को छोड़कर, समाधान एक सीएसएस स्टेटमेंट में सरलीकृत किया जा सकता है। इसके अतिरिक्त, display: block का उपयोग display: block ( display: table बजाय display: table ) मार्जिन ठीक से गिरने की अनुमति देता है, जब स्पष्टफ़िक्स वाले तत्व भाई-बहन होते हैं

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

यह स्पष्टफ़िक्स का सबसे आधुनिक संस्करण है


पुराने क्लीनफिक्स सॉल्यूशंस

नीचे दिए गए समाधान आधुनिक ब्राउज़रों के लिए आवश्यक नहीं हैं, लेकिन पुराने ब्राउज़रों को लक्षित करने के लिए उपयोगी हो सकते हैं

ध्यान दें कि ये समाधान ब्राउज़र की बगों पर भरोसा करते हैं और इसलिए इसका उपयोग केवल तब किया जाना चाहिए जब उपरोक्त कोई भी समाधान आपके लिए काम न करे

वे मोटे तौर पर कालानुक्रमिक क्रम में सूचीबद्ध हैं।


"बीट व्हायर क्लियरफिक्स", आधुनिक ब्राउज़रों के लिए एक साफ़फ़िक्स

थियरी कोब्लेंटज़ ' सीएसएस मोजो ने बताया है कि जब आधुनिक ब्राउज़रों को लक्षित किया जाता है, तो अब हम zoom और ::before गुण / मूल्य ::before और केवल उपयोग कर सकते हैं:

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

यह समाधान IE 6/7 के लिए समर्थन नहीं करता है … उद्देश्य पर!

थिएरी भी प्रदान करता है: " सावधानी के एक शब्द : यदि आप स्क्रैच से एक नई परियोजना शुरू करते हैं, तो इसके लिए जाएं, लेकिन इस तकनीक को अब आपके पास नहीं बदले, क्योंकि आप पुरानी आईई का समर्थन नहीं करते हैं, लेकिन आपके मौजूदा नियमों को रोकना गिरने के मार्जिन। "


माइक्रो कलेरफ़िक्स

सबसे हालिया और विश्व स्तर पर अपनाया गया स्पष्टफ़िक्स समाधान, निकोलस गैलाघर द्वारा माइक्रो क्लियरफ़िक्स ।

ज्ञात समर्थन: फ़ायरफ़ॉक्स 3.5+, सफारी 4+, क्रोम, ओपेरा 9 +, आईई 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; } 

IE के लिए "hasLayout" सेट करने के लिए display प्रॉपर्टी का उपयोग करने के बजाय, अन्य प्रॉपर्टी का उपयोग किसी तत्व के लिए "हैलेआउट" ट्रिगर करने के लिए किया जा सकता है

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

overflow संपत्ति का उपयोग कर फ़्लोट्स साफ़ करने का दूसरा तरीका अंडरस्कोर हैक का उपयोग करना है। आईई अंडरस्कोर के साथ प्रीफ़िक्सेल मान लागू करेगी, अन्य ब्राउज़र्स नहीं करेंगे zoom संपत्ति में आईने में हैयाआउट है:

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

जबकि यह काम करता है … यह हैक्स का उपयोग करने के लिए आदर्श नहीं है।


पीआईई: आसान समाशोधन विधि

यह पुरानी "आसान समाशोधन" विधि को अधिक जटिल सीएसएस की कीमत पर, कंटेनर की सीमा से बाहर स्थित स्थिति वाले तत्वों को लटका देने की अनुमति का लाभ होता है।

यह समाधान काफी पुराना है, लेकिन आप स्थिति सब कुछ पर आसान क्लीयरिंग के बारे में सब सीख सकते हैं: http://www.positioniseverything.net/easyclearing.html


"स्पष्ट" संपत्ति का उपयोग कर तत्व

त्वरित और गंदे समाधान … कई कमियां हैं:

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

कमियां

  • यह उत्तरदायी नहीं है और इस प्रकार वांछित प्रभाव नहीं प्रदान कर सकता है यदि लेआउट शैली मीडिया प्रश्नों के आधार पर बदल जाती है। शुद्ध सीएसएस में एक समाधान अधिक आदर्श है।
  • यह आपके मार्कअप में कोई सिमेंटिक वैल्यू नहीं जोड़ता है
  • यह आपके कोड को अव्यवसायिक दिखता है
  • भविष्य में जब आपको किसी अन्य साफ़फ़िक्स समाधान का उपयोग करने की आवश्यकता होती है, तो आपको वापस जाने के लिए और मार्कअप के चारों ओर भरे गए हर एक टैग को नहीं निकालना होगा।

हम क्या समस्याओं को हल करने की कोशिश कर रहे हैं?

फ़्लोटिंग सामान जब दो महत्वपूर्ण विचार हैं:

  1. वंश वाले फ्लोट्स शामिल हैं इसका अर्थ यह है कि प्रश्न में तत्व सभी अस्थायी वंश को लपेटने के लिए पर्याप्त रूप से लंबा बनाता है। (वे बाहर लटका नहीं।)

    फ्लोटिंग सामग्री को अपने कंटेनर के बाहर फांसी

  2. बाहर के फ़्लोट्स से वंश को इन्सुलेट करना। इसका अर्थ है कि एक तत्व के अंदर वाले वंशज clear: both उपयोग करने में सक्षम होंगे clear: both और यह तत्व के बाहर फ्लोट के साथ बातचीत नहीं करता है

    <code> स्पष्ट: दोनों में </ code> DOM में कहीं और एक फ्लोट के साथ बातचीत करना

फ़ॉर्मेटिंग संदर्भों को ब्लॉक करें

इनमें से दोनों को करने का एकमात्र तरीका है और वह एक नया ब्लॉक स्वरूपण संदर्भ स्थापित करना है । तत्व जो एक ब्लॉक स्वरूपण संदर्भ स्थापित करते हैं वह एक पृथक आयत होता है जिसमें एक दूसरे के साथ बातचीत होती है। एक ब्लॉक स्वरूपण संदर्भ हमेशा अस्थायी रूप से अपने अस्थायी वंश को लपेटने के लिए काफी लंबा होगा, और ब्लॉक स्वरूपण संदर्भ के बाहर कोई फ़्लोट्स तत्वों के अंदर से बातचीत नहीं कर सकता। यह दो तरह से इन्सुलेशन बिल्कुल वही है जिसे आप चाहते हैं आईई में, इस समान अवधारणा को हैलायआउट कहा जाता है, जिसे zoom: 1 माध्यम से सेट किया जा सकता है zoom: 1

ब्लॉक स्वरूपण संदर्भ को स्थापित करने के कई तरीके हैं, लेकिन जो उपाय मैं सुझाता हूं वह display: inline-block width: 100% साथ display: inline-block width: 100% (बेशक, width: 100% का उपयोग करते हुए सामान्य चेतावनियां हैं width: 100% , इसलिए box-sizing: border-box उपयोग करें 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> 

और अब सीएसएस

 /* 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 */ } 

यह अपने आप का प्रयास करें

कोड के चारों ओर खेलने के लिए जेएस बिन पर जाएं और देखें कि यह समाधान जमीन से कैसे बनाया गया है।

पारंपरिक क्लीनफिक्स विधियों को हानिकारक माना जाता है

पारंपरिक साफ़फ़िक्स समाधान के साथ समस्या यह है कि वे IE और बाकी सभी के लिए एक ही लक्ष्य प्राप्त करने के लिए दो भिन्न रेंडरिंग अवधारणाओं का उपयोग करते हैं। IE में वे एक नया ब्लॉक स्वरूपण संदर्भ स्थापित करने के लिए हैलेआउट का उपयोग करते हैं, लेकिन हर किसी के लिए वे clear: both बक्से ( :after ) का उपयोग करते हैं clear: both , जो एक नया ब्लॉक स्वरूपण संदर्भ स्थापित नहीं करता है इसका मतलब यह है कि चीजें सभी परिस्थितियों में एक ही तरह से व्यवहार नहीं करेंगी। यह क्यों बुरा है, इस बारे में एक स्पष्टीकरण के लिए देखें कि सब कुछ जो आप जानते हैं के बारे में Clearfix गलत है

नए मानक, जैसा कि इनुट। सीएसएस और बोरबॉन द्वारा प्रयोग किया जाता है – दो बहुत व्यापक रूप से इस्तेमाल किए गए और अच्छी तरह से बनाए गए CSS / Sass फ़्रेमवर्क:

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

टिप्पणियाँ

ध्यान रखें कि फिक्स्डबॉक्स लेटेस्ट्स अब बहुत अधिक स्मार्ट तरीके से उपलब्ध करा सकते हैं। सीएसएस फ्लोट मूल रूप से इनलाइन सामग्री के लिए चारों ओर प्रवाह करने के लिए डिज़ाइन किया गया था – जैसे कि एक लंबी पाठ्यवृत्त लेख में छवियाँ – और ग्रिड लेआउट और पसंद नहीं यदि आपका लक्ष्य ब्राउज़र फ्लेक्सबॉक्स का समर्थन करता है , तो यह देखने में लायक है

यह आईई 7 का समर्थन नहीं करता है आपको IE7 का समर्थन नहीं करना चाहिए ऐसा करने से उपयोगकर्ताओं को असंबद्ध सुरक्षा का फायदा उठाना जारी है और अन्य सभी वेब डेवलपर्स के लिए ज़िंदगी कठिन बना देती है, क्योंकि यह उपयोगकर्ताओं और संगठनों के आधुनिक ब्राउज़रों पर स्विच करने के लिए दबाव को कम करता है।

यह स्पष्टफिक्स घोषित किया गया था और जुलाई 2012 में थियरी कोब्लेन्टेज़ द्वारा समझाया गया था। यह निकोलस गैलाघर के 2011 सूक्ष्म-स्पष्टफ़िक्स से अनावश्यक भार का शेड है। इस प्रक्रिया में, यह आपके उपयोग के लिए छद्म तत्व को मुक्त करता है। display: block बजाय display: block का उपयोग करने के लिए इसे अपडेट कर दिया गया है display: table (फिर, थिएरी कोब्लेन्ट्ज को क्रेडिट)।

मैं निम्नलिखित का उपयोग करने की सलाह देता हूं, जिसे 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; } 

अतिरिक्त मार्क-अप के साथ फ़्लोट्स साफ़ करने के लिए अतिप्रवाह संपत्ति का उपयोग किया जा सकता है:

 .container { overflow: hidden; } 

यह आईई 6 को छोड़कर सभी ब्राउज़रों के लिए काम करता है, जहां आपको केवल सब कुछ करने की ज़रूरत है, हैलायआउट सक्षम है (जूम मेरा पसंदीदा तरीका है):

 .container { zoom: 1; } 

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

मुझे आधिकारिक CLAARFIX में एक बग मिला- विधि: डीओटी में फ़ॉन्ट आकार नहीं है और अगर आप height = 0 निर्धारित करते हैं और आपके डोम-ट्री में पहला एलीमेंट वर्ग "clearfix" है तो आप के पास 12px के पृष्ठ के नीचे एक मार्जिन होगा I

आपको इसे इस तरह ठीक करना होगा:

 /* 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

यह काफी साफ समाधान है:

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

यह Firefox 3.5+, सफारी 4+, क्रोम, ओपेरा 9+, आईई 6+ में काम करने के लिए जाना जाता है

इसमें शामिल है: चयनकर्ता से पहले फ्लोट को रिक्त करने के लिए आवश्यक नहीं है, लेकिन यह आधुनिक ब्राउज़रों में ढहने से शीर्ष-मार्जिन को रोकता है। इससे यह सुनिश्चित होता है कि ज़ूम: 1 लागू होने पर IE 6/7 के साथ दृश्य स्थिरता हो।

http://nicolasgallagher.com/micro-clearfix-hack/ से

बूटस्ट्रैप से साफ़फ़िक्स:

 .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } 

मैं अभी उपयोग करता हूं: –

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

सबसे अच्छा और IE8 + 🙂 के साथ संगत काम करता है

बड़ी संख्या में उत्तरों को देखते हुए मैं पोस्ट नहीं कर रहा था। हालांकि, यह विधि किसी की सहायता कर सकती है, क्योंकि यह मेरी मदद करता है

जब भी संभव हो तो फ़्लोट्स से सफ़र रहें

यह उल्लेखनीय है कि, मैं ईबोला की तरह तैरता है कई कारण हैं और मैं अकेला नहीं हूं; रीक्डो को एक स्पष्टफ़्लिक्स के बारे में जवाब दें और आप देखेंगे कि मेरा क्या मतलब है। अपने शब्दों में: ...the use of floated elements for layout is getting more and more discouraged with the use of better alternatives...

फ्लोट्स के अलावा अन्य अच्छे (और कभी-कभी बेहतर) विकल्प मौजूद हैं जैसा कि प्रौद्योगिकी अग्रिम और सुधार, फ्लेक्सबॉक्स (और अन्य विधियां) को व्यापक रूप से अपनाया जा रहा है और फ़्लोट सिर्फ एक खराब स्मृति बन जाएगा। शायद एक सीएसएस 4?


फ्लोट दुर्व्यवहार और विफल हो गया साफ

सबसे पहले, कभी-कभी, आप सोच सकते हैं कि जब तक आपके लाइफसेवर को छिद्रित नहीं किया जाता है और आपके एचटीएमएल प्रवाह को सिंक करना शुरू हो जाता है, तब तक आप सुरक्षित हैं।

नीचे codepen 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> 

सीएसएस

 div { border: 1px solid #f00; width: 200px; height: 100px; } div.floated { float: left; } .clear { clear: both; } section { border: 1px solid #f0f; } 

हालांकि , जब आपने सोचा कि आपका फ्लोट पाल योग्य है … उछाल! जैसा कि स्क्रीन का आकार छोटा और छोटा हो जाता है, आप नीचे ग्राफिक की तरह अजीब व्यवहार देखते हैं (समान http://codepen.io/omarjuvera/pen/jEXBya ):

फ्लोट बग नमूना 1

आपको क्यों परवाह करना चाहिए? मैं सटीक आंकड़े के बारे में निश्चित नहीं हूं, लेकिन उपयोग किए गए उपकरणों के बारे में 80% (या अधिक) छोटे स्क्रीन वाले मोबाइल डिवाइस हैं डेस्कटॉप कंप्यूटर / लैपटॉप अब राजा नहीं हैं


यह वहाँ खत्म नहीं होता है

फ्लोट्स के साथ यह एकमात्र समस्या नहीं है बहुत सारे हैं, लेकिन इस उदाहरण में, कुछ कह सकते हैं कि all you have to do is to place your floats in a container । लेकिन जैसा कि आप कोडपेन और ग्राफिक में देख सकते हैं, ऐसा नहीं है। यह स्पष्ट रूप से चीजों को सबसे खराब कर दिया:

एचटीएमएल

 <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> 

सीएसएस

 #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; } 

परिणाम के लिए?

यह ऐसा ही है! फ्लोट बग नमूना 2

कम से कम आप जानते हैं, आप एक सीएसएस पार्टी शुरू करेंगे, सभी प्रकार के चयनकर्ताओं और गुणों को पार्टी में आमंत्रित करेंगे; अपने सीएसएस की तुलना में आपके सीएसएस की एक बड़ी गड़बड़ी बना रही है। बस अपने फ्लोट को ठीक करने के लिए


बचाव के लिए सीएसएस साफ़फिक्स

सीएसएस का यह सरल और बहुत अनुकूलनीय टुकड़ा एक सौंदर्य और एक "उद्धारकर्ता" है:

 .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> 

सीएसएस

 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 --> और सिमेंटिक पुलिस को खुश रखने की ज़रूरत नहीं है। यह केवल एकमात्र लाभ नहीं है यह @media किसी भी स्क्रीन आकार के लिए उत्तरदायी है, इसके बिना @media के उपयोग के सरलतम रूप में। दूसरे शब्दों में, यह आपके फ्लोट कंटेनर को चेक और बाढ़ की रोकथाम में रखेगा। अन्त में, यह एक छोटे कराटे में = पुराने पुराने ब्राउज़रों के लिए समर्थन प्रदान करता है =)

यहाँ स्पष्टफिक्स फिर से है

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

मैं हमेशा अपने ग्रिड के मुख्य भागों को फ़्लोट करता हूं और clear: both; लागू करता हूं clear: both; पादलेख के लिए इसके लिए अतिरिक्त डिवा या कक्षा की आवश्यकता नहीं है

ईमानदारी से; सभी समाधान एक रेंडरिंग बग को ठीक करने के लिए एक हैक लगते हैं … क्या मैं गलत हूँ?

मैंने सबसे <br clear="all" /> होने के लिए <br clear="all" /> को <br clear="all" /> । देखकर class="clearfix" हर जगह किसी व्यक्ति की संवेदनाओं को स्ट्रोक नहीं कर सकता जो बाहरी मार्कअप तत्वों के लिए ऑब्जेक्ट है, क्या यह? आप बस एक अलग कैनवास पर समस्या पेंट कर रहे हैं

मैं भी display: hidden इस्तेमाल करता हूं display: hidden समाधान, जो महान है और इसके लिए अतिरिक्त क्लास घोषणाएं या html मार्कअप की आवश्यकता नहीं है … लेकिन कभी-कभी आपको कंटेनर से अधिक मात्रा में तत्वों की ज़रूरत होती है, उदाहरण के लिए सुंदर रिबन और सैश

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

स्पष्टफ़िक्स के बारे में डेवलपर्स का अन्य अलग-अलग संकल्पना है http://www.wpreads.com/2013/03/floating-elements-css-clearfix.html

मैंने इन सभी समाधानों की कोशिश की है, जब मैं नीचे दिए गए कोड का उपयोग करता हूं तो एक बड़ा अंतर स्वतः <html> तत्व में जोड़ दिया जाएगा:

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

अंत में, मैंने font-size: 0; को जोड़कर मार्जिन समस्या का समाधान किया font-size: 0; ऊपर सीएसएस के लिए

एक साफ़िफ़िक्स एक तत्व के लिए स्वयं के बाद स्वतः साफ़ करने के लिए एक तरीका है, जिससे आपको अतिरिक्त मार्कअप जोड़ने की आवश्यकता नहीं है।

 .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! --> 

SASS के साथ, यह स्पष्ट है:

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

और यह प्रयोग की तरह है:

 .container { @include clearfix; } 

यदि आप नया साफ़फ़िक्स चाहते हैं:

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

कम ( 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(); } 

overflow:hidden का उपयोग करना overflow:hidden / auto और ऊँचाई 6 के लिए पर्याप्त होगा यदि फ़्लोटिंग कंटेनर के पास एक मूल तत्व है।

या तो #test में से कोई भी काम कर सकता है, क्योंकि नीचे दिए गए HTML को फ़्लोट्स साफ़ करने के लिए

 #test { overflow:hidden; // or auto; _height:1%; forces hasLayout in IE6 } <div id="test"> <div style="floatLeft"></div> <div style="random"></div> </div> 

ऐसे मामलों में जब ये आई 6 के साथ काम करने से इनकार करता है, तो फ्लोट साफ़ करने के लिए माता-पिता को फ्लोट करें।

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

अभी तक किसी अन्य प्रकार की क्लीयरिंग की आवश्यकता नहीं है। हो सकता है कि यह मेरे एचटीएमएल लिखने का तरीका है।

क्यों सीएसएस हैक का उपयोग करने की कोशिश करने के लिए HTML का 1 लाइन क्या काम करते हैं। और सीमेंटिक एचटीएमएल टीयू का प्रयोग क्यों नहीं किया जा सकता है?

मेरे लिए वास्तव में उपयोग करने के लिए बेहतर है:

 <br style="clear:both" /> 

और अगर आप अपने एचटीएमएल में कोई भी .clear { clear:both; } नहीं चाहते हैं, तो आपको अपने ब्रेक के लिए क्लास का इस्तेमाल करना होगा .clear { clear:both; } .clear { clear:both; } अपने सीएसएस में

इसका लाभ:

  • रेखा पर लौटने के लिए html का शब्दार्थिक उपयोग
  • अगर कोई सीएसएस लोड नहीं होता है तो यह काम करेगा
  • कोई अतिरिक्त सीएसएस कोड और हैक जरूरत नहीं है
  • सीएसएस के साथ ब्र अनुकरण करने की कोई आवश्यकता नहीं है, यह पहले से ही HTML में मौजूद है

मैं #content भी फ्लोट करता था, इस तरह से दोनों स्तंभों में फ्लोट्स होते हैं इसके अलावा यह आपको साइड बार साफ़ किए बिना #content अंदर तत्वों को साफ़ करने की अनुमति देगा।

आवरण के साथ एक ही चीज़, आपको दो स्तंभों को लपेटने के लिए इसे ब्लॉक स्वरूपण प्रसंग बनाने की आवश्यकता होगी

यह लेख कुछ ट्रिगर्स का उल्लेख करता है जो आप उपयोग कर सकते हैं: ब्लॉक प्रारूपण संदर्भ

मान लें कि आप इस HTML संरचना का उपयोग कर रहे हैं:

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

यहां सीएसएस है जिसका मैं उपयोग करेगा:

 div#container { overflow: hidden; /* makes element contain floated child elements */ } div#content, div#sidebar { float: left; display: inline; /* preemptively fixes IE6 dobule-margin bug */ } 

मैं हर समय इस सेट का उपयोग करता हूं और यह मेरे लिए ठीक काम करता है, यहां तक ​​कि आईई 6 में भी।

मैं हमेशा माइक्रो-साफ़फ़िक्स का उपयोग करता हूं:

 .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } /** * For IE 6/7 only */ .cf { *zoom: 1; } 

कैसकेड फ्रेमवर्क में मैं इसे ब्लॉक स्तर के तत्वों पर डिफ़ॉल्ट रूप से भी लागू करता हूं। आईएमओ, ब्लॉक स्तर तत्वों पर डिफ़ॉल्ट रूप से इसे लागू करने से ब्लॉक स्तर के तत्व उनके पारंपरिक व्यवहार से अधिक सहज व्यवहार प्रदान करते हैं। यह मेरे लिए पुराने ब्राउज़रों के समर्थन को कैसकेड फ्रेमवर्क (जो कि आईई 6-8 के साथ-साथ आधुनिक ब्राउज़रों का समर्थन करता है) के लिए बहुत आसान बना देता है।

अन्य स्पष्टियों के विपरीत, यहां कंटेनरों के बिना एक ओपन एंडेड है

अन्य साफ़फिक्सेस या तो शुरुआती तत्व को एक अच्छी तरह से चिह्नित बंद कंटेनर की आवश्यकता होती है या अतिरिक्त, अर्थात् खाली <div> इसके विपरीत, सामग्री और मार्कअप को अलग करने के लिए इस समस्या का सख्त सीएसएस समाधान आवश्यक है।

एकमात्र तथ्य यह है कि किसी को फ्लोट के अंत को चिह्नित करने की ज़रूरत है, वह अप्रतित सीएसएस टाइपसेटिंग के लिए अनुमति नहीं देता है।

यदि बाद वाला आपका लक्ष्य है, तो फ्लोट को किसी भी चीज़ के लिए खुला (पैराग्राफ, ऑर्डर और अनारोडेड सूचियां आदि) को चारों ओर लपेटने के लिए छोड़ दिया जाना चाहिए, जब तक कि "साफ़फ़िक्स" का सामना नहीं किया जाता। उदाहरण के लिए, एक नया शीर्षक द्वारा स्पष्ट किया जा सकता है।

यही कारण है कि मैं नए शीर्षकों के साथ निम्न स्पष्टफ़िक्स का उपयोग करता हूं:

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

समस्या का समाधान करने के लिए इस समाधान का उपयोग मेरी वेबसाइट पर बड़े पैमाने पर किया जाता है: एक छोटे आकार के बगल में पाठ छोटा है और अगले समाशोधन वस्तु का शीर्ष-मार्जिन का सम्मान नहीं किया जाता है।

यह साइट से पीडीएफ़ स्वचालित रूप से उत्पन्न होने पर मैन्युअल हस्तक्षेप को रोकता है। यहां एक उदाहरण पृष्ठ है

एक नया प्रदर्शन मान एक पंक्ति में नौकरी लगता है

 display: flow-root; 

W3 युक्ति से: "तत्व ब्लॉक कंटेनर बॉक्स उत्पन्न करता है, और प्रवाह लेआउट का उपयोग करके इसकी सामग्री को देता है। यह हमेशा इसकी सामग्री के लिए एक नया ब्लॉक स्वरूपण संदर्भ स्थापित करता है।"

सूचना: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

Link जैसा कि ऊपर दिए गए लिंक में दिखाया गया है, समर्थन वर्तमान में सीमित है इसलिए नीचे की तरह फ़ॉलबैक समर्थन उपयोग की जा सकती है: https://github.com/fliptheweb/postcss-flow-root

आप इसे अपने सीएसएस में भी डाल सकते हैं:

 .cb:after{ visibility: hidden; display: block; content: "."; clear: both; height: 0; } *:first-child+html .cb{zoom: 1} /* for IE7 */ 

और अपनी अभिभावक इकाई में वर्ग "सीबी" जोड़ें:

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

आपको अपने मूल कोड में कुछ भी जोड़ने की आवश्यकता नहीं होगी …

 #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> 

क्या आपने यह कोशिश की है:

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

मेरे पास इस विधि के साथ कोई समस्या नहीं थी

My Favourite Method is to create a clearfix class in my css / scss document as below

 .clearfix{ clear:both } 

And then call it in my html document as shown below

 <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>