क्लीयरफिक्स क्या है?

Question

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

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

क्या आप एक स्पष्ट उपसर्ग के साथ लेआउट के कुछ उदाहरण प्रदान कर सकते हैं?

Comments

यह आईई 6 के लिए नहीं है। एक स्पष्टता यह सुनिश्चित करती है कि divअपने तैरते बच्चों को घेरने के लिए पूरी तरह से उचित ऊंचाई तक विस्तार होगा। webtoolkit.info/css-clearfix.html

— Sparky

Answer 1

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

यह ध्यान देने योग्य है कि आज, लेआउट के लिए फ्लोटेड तत्वों का उपयोग बेहतर विकल्पों के उपयोग के साथ अधिक से अधिक हतोत्साहित हो रहा है।

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

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

विस्तृत ब्राउज़र सूची के लिए देखें: https://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>

स्पष्ट उपसर्ग के साथ, आपको केवल निम्नलिखित की आवश्यकता है:

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

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

Comments

या तो जिस कारण से एक सफेद स्थान एक डॉट की तुलना में एक बेहतर अभ्यास है, मुझे कुछ ब्राउज़रों पर डॉट के साथ समस्या हुई है इसलिए मैंने इसका उल्लेख क्यों किया है :) थोड़ा सुधार नहीं होगा चोट लगी है :)

— Val

content: "\00A0";\ 00A0 एक सफेद स्थान का प्रतिनिधित्व करता है, एक साधारण सफेद स्थान अच्छी तरह से काम नहीं करता है :) क्षमा करें। :)

— वैल

@MadaraUchiha, प्रदर्शन क्यों है: इनलाइन-ब्लॉक फ्लोटिंग तत्वों से बेहतर है? मेरे पास एकमात्र समस्या यह है कि इनलाइन ब्लॉक के साथ प्रदर्शित करने से टैग के बीच व्हॉट्सएप के साथ समस्या होती है, जो हमेशा आसानी से नियंत्रित नहीं होती है।

— मुवल्कलर

@Kzqai: यही कारण है कि जब यह अधिक व्यापक रूप से समर्थित हो जाता है तो फ्लेक्सबॉक्स पसंदीदा विकल्प है।

— मदारा का भूत

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

— बोल्टलॉक

Answer 2

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

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

Comments

मेरा अभ्यास इस बात पर आया है कि फ्लोट का उपयोग करने का कोई कारण नहीं है। जब भी आप इसका इस्तेमाल करते हैं तो आधी चीजें टूट जाती हैं। मैं केवल इसका उपयोग तब करूंगा जब मुझे किसी div के अंदर चीजों को बनाने की आवश्यकता होगी। इनलाइन-ब्लॉक कमाल है। नया बॉक्स मॉडल कमाल का है। तो ऊर्ध्वाधर संरेखित करने के लिए कोई और हैक नहीं।

— मुहम्मद उमेर

inline-blockअंतर-ब्लॉक रिक्ति समस्या के कारण फ्लोट्स पर एक सख्त सुधार नहीं है , जहां HTML में व्हाट्सएप उन अंतरिक्ष वर्णों में अनुवाद करता है जो अलग-अलग ब्लॉक करते हैं। अपने स्वयं के वर्कअराउंड कीinline-block आवश्यकता होती है , जैसे क्लीयरफिक्स की आवश्यकता होती है। float

— रोरी ओ'केन

Answer 3

clearfixएक कंटेनर को अपने तैरते बच्चों को लपेटने की अनुमति देता है। clearfixया समतुल्य स्टाइल के बिना , एक कंटेनर अपने तैरते बच्चों के चारों ओर नहीं लपेटता है और ढह जाता है, जैसे कि उसके तैरते बच्चे बिल्कुल तैनात थे।

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

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

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

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

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

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

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

Comments

अच्छा जवाब जॉन! मैं जिस बारे में सोच रहा हूं वह स्पष्ट है कि divलपेटें को फ्लोटेड तत्व क्यों बनाते हैं? क्या आप इसकी कल्पना करने में मेरी मदद कर सकते हैं?

— अलेक्जेंडर सुरफेल

@AlexanderSuraphel: यह उत्तर इसे विस्तार से बताता है -> stackoverflow.com/questions/12871710/…

— John Slegers

Answer 4

2017 के Q2 पर स्थिति पर एक अद्यतन पेश करने के लिए।

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

.clearfix {
   display: flow-root;
}

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

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

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

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

Comments

क्या आप यह बता सकते हैं कि प्रश्न के संबंध में यह क्या करता है?

— 1.21 गीगावाट 20

क्लीयरफिक्स परिवर्तन फ्लोट किए गए बच्चों को जो कि चतुर हैक्स का उपयोग करके माता-पिता के प्रवाह को प्रभावित नहीं करता flow-rootहै, वास्तविक समाधान है।

— रहस्योद्घाटन

Answer 5

सीधे शब्दों में कहें, क्लियरफिक्स एक हैक है ।

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

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

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

संदर्भ

Answer 6

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

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

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

Answer 7

स्पष्ट 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>

बेशक यह केवल उन उदाहरणों में उपयोग किया जा सकता है जहां आप कभी भी सामग्री को अतिप्रवाह करने की इच्छा नहीं रखते हैं।

Answer 8

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

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

Answer 9

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

अंतर सामग्री डॉट है जिसे \00A0== से बदल दिया जाता है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}

Comments

आप कम से कम 3 उदाहरणों में खुद को यहां से आगे बढ़ा रहे हैं। .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}, और .clearfix {...}सभी एक ही बात का चयन करें और एक दूसरे को ओवरराइट। यह थोड़ा हैकरी है और वास्तव में जरूरत नहीं है।

— ऑरियन

यह सीएसएस क्लीयरफिक्स विधि का पुराना संस्करण है, जिसे css-tricks.com/snippets/css/clear-fix से लिया गया था, जो मुझे तब पता चला, कि ""। [Dot] बहुत कष्टप्रद था और इसे एक सफेद स्थान के साथ बदल दिया गया था। , इसलिए \00A0, मुझे लगता है कि यह क्रॉस ब्राउज़र संगतता और उस समय के ज्ञान के कारण था।

— वैल