दिलचस्प पोस्ट
जीआईटी फ़ाइल का कौन सा संस्करण अंततः उपयोग किया जाएगा: स्थानीय, आधार या रिमोट? जावास्क्रिप्ट में एक वीडियो (फीड नहीं) के लिए JSON के माध्यम से यूथट्यूब जानकारी प्राप्त करें PHP एआरए कुंजी में अक्षरों की अनुमति है? .NET – शब्दकोश लॉकिंग बनाम ConcurrentDictionary यह कोड केवल Z से A को प्रिंट क्यों नहीं करता? UISearchBar नमूना कोड मैं Google लाइन चार्ट के किनारे पर छवि या आइकन कैसे जोड़ सकता हूं क्या सफारी के लिए सीएसएस हैक केवल क्रोम नहीं है? जार या फ़ाइल सिस्टम से छवि आइकन लोड हो रहा है मुझे यह अजगर __del__ व्यवहार नहीं समझता ट्विटर बूटस्ट्रैप मोडल स्टॉप यूट्यूब वीडियो जेएस और जेक्यू एचटीएमएल तत्वों का पता लगा सकता है, और कहते हैं कि वे अपरिभाषित हैं पैरामीटर के रूप में अनाम रूपों को कैसे पास करें? जावास्क्रिप्ट ऑब्जेक्ट कुंजी के रूप में एक कंसेटेड (गतिशील) स्ट्रिंग का उपयोग करें? यह पता लगाया जा रहा है कि किसी वेब पेज में कौन से फ़ॉन्ट का उपयोग किया गया था

एक स्पष्टफिक्स क्या है?

हाल ही में मैं कुछ वेबसाइट के कोड के माध्यम से देख रहा था, और देखा कि हर <div> एक क्लास का clearfix

त्वरित Google खोज के बाद, मुझे पता चला कि यह IE6 के लिए कभी-कभी है, लेकिन वास्तव में एक स्पष्टफ़िक्स क्या है?

क्या आप स्पष्टफ़िक्स के बिना किसी लेआउट की तुलना में एक साफ़फिक्स के साथ लेआउट के कुछ उदाहरण प्रदान कर सकते हैं?

वेब के समाधान से एकत्रित समाधान "एक स्पष्टफिक्स क्या है?"

यदि आपको IE9 या उससे कम का समर्थन करने की आवश्यकता नहीं है, तो आप फ्लेक्सबॉक्स को स्वतंत्र रूप से उपयोग कर सकते हैं, और फ्लोट लेआउट का उपयोग करने की आवश्यकता नहीं है।

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

  • display: inline-block – बेहतर
  • फ्लेक्सबॉक्स – सर्वश्रेष्ठ (लेकिन सीमित ब्राउज़र समर्थन)

फ्लेक्सबॉक्स फ़ायरफ़ॉक्स 18, क्रोम 21, ओपेरा 12.10, और इंटरनेट एक्सप्लोरर 10, सफ़ारी 6.1 (मोबाइल सफारी सहित) और एंड्रॉइड के डिफॉल्ट ब्राउज़र 4.4 से समर्थित है।

एक विस्तृत ब्राउज़र सूची के लिए देखें: http://caniuse.com/flexbox

(शायद इसकी स्थिति पूरी तरह से स्थापित हो जाने के बाद, यह तत्वों को बिछाने का बिल्कुल अनुशंसित तरीका हो सकता है।)


एक स्पष्टफ़िक्स एक तत्व के लिए अपने बच्चे तत्वों को स्वचालित रूप से साफ़ करने का एक तरीका है, ताकि आपको अतिरिक्त मार्कअप जोड़ने की आवश्यकता न हो। यह आम तौर पर फ्लोट लेआउट में उपयोग किया जाता है, जहां तत्व क्षैतिज रूप से स्टैक्ड किए जाते हैं।

निस्तारण तत्वों के लिए शून्य-ऊँचाई कंटेनर समस्या से निपटने का एक स्पष्ट तरीका है

एक स्पष्टफिक्स निम्नानुसार किया जाता है:

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

या, यदि आपको IE <8 समर्थन की आवश्यकता नहीं है, तो निम्न भी ठीक है:

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

आम तौर पर आपको कुछ करना होगा जैसे:

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

Clearfix के साथ, आपको केवल निम्नलिखित की आवश्यकता है:

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

इस लेख में इसके बारे में पढ़ें – क्रिस सीयरे द्वारा सीएसएस-ट्रिक्स

यदि आप विज़ुअलाइज़िंग से सीखते हैं, तो यह तस्वीर आपको समझने में मदद कर सकती है कि कौन-सा स्पष्टता क्या है

यहां छवि विवरण दर्ज करें

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

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

clearfix एक कंटेनर को यह बच्चों के बच्चों को लपेटने की अनुमति देता है एक clearfix या समतुल्य स्टाइल के बिना, एक कंटेनर अपने शुरुआती बच्चों के आसपास लपेटता नहीं है और गिरता है, जैसे कि इसकी शुरुआती सील्डन पूरी तरह से तैनात थे

मुख्य लेखकों के रूप में रिकॉर्फ़िक्स के कई संस्करण निकोलस गैलाघेर और थिएरी कोब्लेंटज़ के साथ हैं।

यदि आप पुराने ब्राउज़रों के लिए समर्थन चाहते हैं, तो यह स्पष्टता का उपयोग करना सबसे अच्छा है:

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

एससीएसएस में, आपको निम्नलिखित तकनीक का उपयोग करना चाहिए:

 %clearfix { &:before, &:after { content:" "; display:table; } &:after { clear:both; } & { *zoom:1; } } #clearfixedelement { @extend %clearfix; } 

यदि आप पुराने ब्राउज़रों का समर्थन करने की परवाह नहीं करते हैं, तो एक छोटा संस्करण है:

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

सीधे शब्दों में कहें, स्पष्टता एक हैक है

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

मैं व्यक्तिगत रूप से सूक्ष्म क्वरीफ़िक्स समाधान (निकोलस गैलाघर) की ओर झुकता हूं

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

संदर्भ

2017 की क्यू 2 की स्थिति के बारे में अद्यतन करने के लिए

एक नया CSS3 प्रदर्शित गुण फ़ायरफ़ॉक्स 53, क्रोम 58 और ओपेरा 45 में उपलब्ध है।

 .clearfix { display: flow-root; } 

यहां किसी भी ब्राउज़र की उपलब्धता की जांच करें: http://caniuse.com/#feat=flow-root

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

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

 .container { display: flow-root; background-color: Gainsboro; } .item { border: 1px solid Black; float: left; } .item1 { height: 120px; width: 120px; } .item2 { height: 80px; width: 140px; float: right; } .item3 { height: 160px; width: 110px; } 
 <div class="container"> This container box encloses all of its floating children. <div class="item item1">Floating box 1</div> <div class="item item2">Floating box 2</div> <div class="item item3">Floating box 3</div> </div> 

सामान्य तौर पर सीएसएस फ्लोट-आधारित लेआउट में उपयोग की जाने वाली एक तकनीक एक तत्व को सीएसएस गुणों को मुहैया कर रही है जो आप जानते हैं कि फ्लोटिंग तत्व शामिल होंगे तकनीक, जिसे आमतौर पर एक स्पष्ट परिभाषा का उपयोग कर कार्यान्वित किया जाता है जिसे clearfix कहा जाता है, (आमतौर पर) निम्न सीएसएस व्यवहार लागू करता है:

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

इन संयुक्त व्यवहारों का उद्देश्य एक कंटेनर बनाना है :after सक्रिय तत्व के :after एक एकल '।' छिपी के रूप में चिह्नित किया गया जो सभी पूर्ववत फ़्लोट को साफ़ करेगा और सामग्री के अगले भाग के लिए पृष्ठ को प्रभावी ढंग से रीसेट करेगा।

एक स्पष्टफिक्स प्राप्त करने के लिए अन्य (और शायद सरल) विकल्प overflow:hidden; का उपयोग करना है overflow:hidden; युक्त तत्व पर उदाहरण के लिए

 .parent { background: red; overflow: hidden; } .segment-a { float: left; } .segment-b { float: right; } 
 <div class="parent"> <div class="segment-a"> Float left </div> <div class="segment-b"> Float right </div> </div> 

यहाँ एक अलग विधि एक ही बात है लेकिन थोड़ा अलग है

अंतर कंटेंट डॉट है जिसे एक \00A0 = 0 whitespace से बदल दिया गया है

इस पर अधिक http://www.jqui.net/tips-tricks/css-clearfix/

 .clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} .clearfix{ display: inline-block;} html[xmlns] .clearfix { display: block;} * html .clearfix{ height: 1%;} .clearfix {display: block} 

यहाँ इसका एक कॉम्पैक्ट संस्करण है …

 .clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block} 

मैंने स्वीकार किए गए उत्तर की कोशिश की लेकिन अभी भी सामग्री अलगाव के साथ एक समस्या थी। नीचे दिए गए एक ": पहले" चयनकर्ता को जोड़ने से समस्या को तय किया गया है:

 // LESS HELPER .clearfix() { &:after, &:before{ content: " "; /* Older browser do not support empty content */ visibility: hidden; display: block; height: 0; clear: both; } } 

कम सीओई नीचे सीएसएस की शिकायत करेगा:

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