समझौता बूटस्ट्रैप के clearfix वर्ग

Question

.clearfix { 
    *zoom: 1; 
    &:before, 
    &:after { 
    display: table; 
    content: ""; 
    // Fixes Opera/contenteditable bug: 
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 
    line-height: 0; 
    } 
    &:after { 
    clear: both; 
    } 
} 

1. क्यों display:block का उपयोग नहीं?
2. इसके अलावा, यह ::before छद्मक्लस पर भी क्यों लागू होता है?

Answer 1

.clearfixless/mixins.less में परिभाषित किया गया है।

A new micro clearfix hack

लेख बताता है कि यह सब काम करता है: इसकी परिभाषा ऊपर राइट इस लेख के लिंक के साथ एक टिप्पणी है।

अद्यतन: हां, लिंक-केवल उत्तर खराब हैं। मुझे यह पता था कि मैंने इस जवाब को पोस्ट किया था, लेकिन मुझे लगता है कि कॉपीराइट, चोरी, और आपके पास क्या है, इसकी प्रतिलिपि बनाना और चिपकाना ठीक नहीं था। हालांकि, अब मुझे लगता है कि यह ठीक है क्योंकि मैंने मूल आलेख से लिंक किया है। मुझे लेखक के नाम का भी उल्लेख करना चाहिए, हालांकि, क्रेडिट के लिए: निकोलस गैलाघर।

यह "सूक्ष्म clearfix" उत्पन्न छद्म तत्वों और उनके displaytable करने के लिए सेट: यहाँ लेख के मांस (ध्यान दें कि "थियरी की विधि" का Thierry Koblentz’s “clearfix reloaded” की चर्चा करते हुए किया जाता है) है। यह anonymous table-cell और नया ब्लॉक प्रारूपण संदर्भ बनाता है जिसका अर्थ है कि :before छद्म-तत्व शीर्ष-मार्जिन पतन को रोकता है। :after छद्म-तत्व पर फ़्लोट साफ़ करने के लिए उपयोग किया जाता है। नतीजतन, किसी भी उत्पन्न सामग्री को छिपाने की कोई आवश्यकता नहीं है और आवश्यक कोड की कुल मात्रा कम हो गई है।

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

• यह अन्य नाव रोकथाम तकनीक है कि एक नए ब्लॉक स्वरूपण संदर्भ बनाते हैं, जैसे के साथ दृश्य स्थिरता सुनिश्चित करता है, overflow:hidden

• जब zoom:1 है यह IE 6/7 के साथ दृश्य स्थिरता सुनिश्चित करता है आवेदन किया है।

एनबी।: ऐसी परिस्थितियां हैं जिनमें आईई 6/7 में नए ब्लॉक प्रारूपण संदर्भ के भीतर फ्लोट के निचले मार्जिन नहीं होंगे। अधिक जानकारी यहां मिल सकती है: Better float containment in IE using CSS expressions।

content:" " का उपयोग (सामग्री स्ट्रिंग में अंतरिक्ष पर ध्यान दें) से बचा जाता है एक Opera bug अगर contenteditable विशेषता भी HTML में कहीं न कहीं मौजूद है कि clearfixed तत्वों के चारों ओर अंतरिक्ष बनाता है। इस फिक्स को खोजने के लिए सर्जीओ सेरुट्टी के लिए धन्यवाद। font:0/0 a का उपयोग करने के लिए एक वैकल्पिक फिक्स है।

विरासत फ़ायरफ़ॉक्स

फ़ायरफ़ॉक्स < 3.5 visibility:hidden की इसके साथ थियरी की विधि का उपयोग डाला चरित्र को छिपाने के लिए से लाभ होगा। यह है क्योंकि फ़ायरफ़ॉक्स की विरासत संस्करणों content:"." जरूरत अतिरिक्त स्थान body और उसके पहले बच्चे तत्व, कुछ निश्चित परिस्थितियों में (जैसे, jsfiddle.net/necolas/K538S/।)

वैकल्पिक नाव-रोकथाम के तरीकों कि एक नए ब्लॉक बनाने के बीच प्रकट होने से बचना फॉर्मेटिंग संदर्भ, जैसे overflow:hidden या display:inline-block कंटेनर तत्व पर लागू करने से, फ़ायरफ़ॉक्स के विरासत संस्करणों में इस व्यवहार से भी बच जाएगा।

Answer 2

:before छद्म तत्व clearfix के लिए आवश्यक ही हैक नहीं है।

यह में मदद करने वाली एक अतिरिक्त अच्छी सुविधा है जो पहले बच्चे तत्व के को मार्जिन-ढहने से रोकती है। इस प्रकार "clearfixed" तत्व के एक बच्चे ब्लॉक तत्व का शीर्ष मार्जिन स्पष्ट फ़िल्टर तत्व की शीर्ष सीमा के नीचे स्थित होने की गारंटी है।

display:table का उपयोग किया जा रहा है क्योंकि display:block चाल नहीं करता है। display:block मार्जिन का उपयोग :before तत्व के साथ भी गिर जाएगा।

एक चेतावनी है: यदि vertical-align:baseline स्पष्ट रूप से <div> तत्वों के साथ तालिका कक्षों में उपयोग किया जाता है, तो फ़ायरफ़ॉक्स अच्छी तरह से संरेखित नहीं होगा। फिर आप विरोधी कॉलिंग सुविधा को खोने के बावजूद display:block का उपयोग करना पसंद कर सकते हैं। आगे के ब्याज के मामले में इस लेख को पढ़ें: Clearfix interfering with vertical-align।

Answer 3

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

आमतौर पर फ्लोट लेआउट को साफ़ करने के लिए फ़्लोटिंग तत्वों के बाद इसका उपयोग किया जाता है।

जब फ्लोट लेआउट का उपयोग किया जाता है, तो यह क्षैतिज रूप से बाल तत्वों को संरेखित करेगा। Clearfix इस व्यवहार को साफ़ करता है।

उदाहरण - पैनलों

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

यदि फ़्लोटिंग तत्व जोड़े जाते हैं, तो पैरेंट कंटेनर उन तत्वों के चारों ओर लपेटा नहीं जाता है क्योंकि फ्लोटिंग तत्वों की ऊंचाई माता-पिता कंटेनर द्वारा विरासत में नहीं होती है।

तो पैनल हेडर & पैनल-पाद लेख के लिए, clearfix तत्वों की नाव लेआउट स्पष्ट करने की जरूरत है: clearfix वर्ग एक दृश्य उपस्थिति कि पैरेंट कंटेनर की ऊंचाई अपने बच्चे के सभी तत्वों को समायोजित करने के बढ़ा दी गई है देता है।

<div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-footer"> 
      <div class="col-xs-6"> 
       <input type="button" class="btn btn-primary" value="Button1"> 
       <input type="button" class="btn btn-primary" value="Button2"> 
       <input type="button" class="btn btn-primary" value="Button3"> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-footer"> 
      <div class="col-xs-6"> 
       <input type="button" class="btn btn-primary" value="Button1"> 
       <input type="button" class="btn btn-primary" value="Button2"> 
       <input type="button" class="btn btn-primary" value="Button3"> 
      </div> 
      <div class="clearfix"/> 
     </div> 
    </div> 
</div>