864

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

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

css clearfix

— क्रिस जे एलन
स्रोत

1

मैं jqui.net/tips-tricks/css-clearfix का उपयोग करता हूं, इससे मुझे डॉट छिपाने में मदद मिलती है :)

— Val

1

IE 6 और IE 7 के बारे में क्या? वे कभी भी चीजों को साफ़ करने के सही तरीके का पालन नहीं करते हैं।

— प्रवीण कुमार पुरुषोत्तम

अब हम एक वर्ष के लिए हैं, क्या यहां उल्लिखित आधुनिक तीन-लाइन क्लियरफिक्स के सही उत्तर को संशोधित करने का कोई मौका है , जैसा कि बड़े-नाम के फ्रेमवर्क Bourbon और Inuit.css में उपयोग किया जाता है? देखें नीचे मेरा उत्तर ।

— आयन

1039

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

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

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

के साथ कंटेनर `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 तत्व हो सकता है।

क्लियरफिक्स रीलोडेड

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

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

यह क्लीयरफिक्स का सबसे आधुनिक संस्करण है।

⋮

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

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

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

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

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

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

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

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

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

माइक्रो क्लीयरिक्स

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

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

displayIE के लिए "hasLayout" सेट करने के लिए संपत्ति का उपयोग करने के बजाय , अन्य गुणों का उपयोग किसी तत्व के लिए "hasLayout" को ट्रिगर करने के लिए किया जा सकता है ।

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

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

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

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

PIE: आसान समाशोधन विधि

इस पुराने "ईज़ी क्लियरिंग" पद्धति में अधिक चालित सीएसएस की कीमत पर, कंटेनर की सीमा के बाहर तैनात तत्वों को रखने की अनुमति देने का लाभ है।

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

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

त्वरित और गंदे समाधान (कुछ कमियों के साथ) जब आप जल्दी से किसी चीज़ को एक साथ थप्पड़ मार रहे हों:

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

कमियां

यह उत्तरदायी नहीं है और इस प्रकार वांछित प्रभाव प्रदान नहीं कर सकता है यदि लेआउट क्वेरी मीडिया के प्रश्नों के आधार पर बदल जाती है। शुद्ध सीएसएस में एक समाधान अधिक आदर्श है।
यह आवश्यक रूप से किसी भी अर्थ मूल्य को जोड़ने के बिना HTML मार्कअप जोड़ता है।
यह एक उदाहरण के लिए इनलाइन के लिए इनलाइन परिभाषा और समाधान की आवश्यकता है, सीएसएस में "क्लीयरफिक्स" के एकल समाधान के लिए एक वर्ग संदर्भ के बजाय और html में वर्ग संदर्भ।
यह दूसरों के साथ काम करने के लिए कोड को मुश्किल बनाता है क्योंकि उन्हें इसके चारों ओर काम करने के लिए अधिक हैक लिखना पड़ सकता है।
भविष्य में जब आपको किसी अन्य क्लीयरफिक्स सॉल्यूशन का उपयोग करने की आवश्यकता होती है, तो आपको <br style="clear: both" />मार्कअप के आसपास फंसे हर टैग को वापस नहीं लाना होगा ।

— ब्यू स्मिथ
स्रोत

25

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

— ब्यू स्मिथ स्मिथ

7

टूटने के लिए धन्यवाद। मुझे पता है: "आसान समाशोधन" विधि के बाद "अतिप्रवाह: छिपी" से बेहतर है, क्योंकि यह CSS3 बॉक्स छाया या तैनात तत्वों को क्रॉप नहीं करता है। कोड की अतिरिक्त लाइनें निश्चित रूप से इसके लायक हैं।

— आयनों

7

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

— विगॉनड

16

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

— BoltClock

3

हमें IE7 का समर्थन नहीं करना चाहिए। कृपया इसे यहां बताई गई तीन-लाइन विधि

— आयनो

70

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

सामान तैरते समय दो महत्वपूर्ण विचार हैं:

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

ब्लॉकिंग प्रारूप संदर्भ

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

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

इसे स्वयं आज़माएं

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

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

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

— क्रिस केलो
स्रोत

"का उपयोग करने के साथ सामान्य चेतावनी" क्या हैं width: 100%? इसके अलावा, क्या आप zoom: 1¶2 के ing1 में उपयोग करने का सुझाव दे रहे हैं ?

— बॉम्र

दिलचस्प जवाब, लेकिन किस बारे में overflow: hidden, अवधारणा का प्रतिपादन क्या करता है? और यह कैसे अलग हो सकता है hasLayout?

— बॉम्र

सच है, लेकिन अगर कोई उपयोग करने से बचता है position: absolute, तो यह ठीक है और उसी प्रतिपादन अवधारणा का हिस्सा होगा?

— बॉम्र

समझा। अवधारणा का प्रतिपादन करने से मेरा मतलब था कि अगर overflow: hiddenऐसी कोई चीज लागू की जाए जो अलग हो जाए तो क्या होता है?

— बॉम्र

2

के बारे में और अधिक पढ़ें hasLayoutपर stackoverflow.com/questions/1794350/what-is-haslayout । मैं इसे एक नए ब्लॉक फॉर्मेटिंग संदर्भ की स्थापना का पर्याय मानता हूं। ऐसा करने वाले तत्व अपने सभी मूल तत्वों के लेआउट के लिए अनिवार्य रूप से जिम्मेदार हैं। इसका एक परिणाम यह है कि नए ब्लॉक प्रारूपण संदर्भ को स्थापित करने वाले तत्वों में अस्थायी वंशज होते हैं और तत्व के बाहर तैरने वाले clear: left|right|bothतत्व अंदर के तत्वों से संपर्क नहीं करते हैं । (यह ऊपर के उत्तर में है।)

— क्रिस कैलो

54

नया मानक, जैसा कि Inuit.css और Bourbon द्वारा उपयोग किया जाता है - दो बहुत व्यापक रूप से इस्तेमाल किया और अच्छी तरह से बनाए रखा CSS / Sass चौखटे:

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

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

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

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

— इनपुट आउटपुट नॉर्म्स
स्रोत

3

मुझे आशा है कि इस पर आपके उत्तर को अधिक वोट मिले क्योंकि मैं आपसे पूरी तरह सहमत हूं। फिर से, यह 2013 है और मुझे सच में विश्वास है कि यह वह समाधान है जिसका लोगों को उपयोग करना चाहिए।

— राफेलबिटेन

2

माना। theie7countdown.com अपने खुद के एनालिटिक्स की जांच करें और उम्मीद करें कि IE7 आपके समय के लायक नहीं है।

— जस्टिन

1

@ जस्टिन सहमत; आपके व्यक्तिगत विश्लेषिकी इसे पूरा करेंगे। मुझे नहीं लगता कि काउंटडाउन साइट को कुछ समय में अपडेट किया गया है, हालांकि - कैनीयूज़ के आँकड़ों का उपयोग करने के लिए सबसे अच्छा है जो वैश्विक स्तर पर IE7 को 0.39% पर रखता है।

— आयन

1

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

— आयनो

आप IE7 का समर्थन करने के लिए आप जितना चाहें उतना आपत्ति कर सकते हैं, लेकिन अगर इन उपयोगकर्ताओं (अलग-अलग कारणों से - आम तौर पर पैसे) का समर्थन करने के लिए व्यापार के अंत से एक आवश्यकता है, तो आप इसे करने जा रहे हैं इससे कोई फर्क नहीं पड़ता कि आप मुद्दे पर कैसा महसूस करते हैं

— क्रि सेल्बक

27

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

— एरिक द रेड
स्रोत

8

आईई-मैक को अब कौन याद करता है? क्यों समस्याओं के कारण चीजों को इतना जटिल बना दिया जाता है जो अधिक प्रासंगिक नहीं हैं?

— इल्या स्ट्रेलित्सिन

23

अतिप्रवाह संपत्ति का उपयोग बिना किसी अतिरिक्त चिह्न के साफ करने के लिए किया जा सकता है:

.container { overflow: hidden; }

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

.container { zoom: 1; }

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

— जैक स्लीट
स्रोत

3

अतिप्रवाह: छिपा हुआ PS3 ब्राउज़र में काम नहीं करता है। ऐसा नहीं है कि ज्यादातर लोगों को काम करने की आवश्यकता है, लेकिन यह PS3 में मेरी साइट को उड़ाने वाली सबसे महत्वपूर्ण चीज है जिसे हम व्यावसायिक कारणों से लक्षित करने की कोशिश कर रहे हैं। ओह।

— GTD

1

और यह एक समस्या है अगर आप वास्तव में कुछ सामग्री कंटेनर के बाहर लटकाना चाहते हैं।

— साइमन ईस्ट

अतिप्रवाह: छिपाई गई क्लिपिंग सामग्री का एक बुरा दुष्प्रभाव है

— क्रिस कैलो

9

overflow:hiddenक्लिपिंग सामग्री का प्रभाव है; यह कंटेनर को साफ करने का साइड इफेक्ट है ;-)

— टैमलिन

अतिप्रवाह: ऑटो एक ब्लॉक प्रारूपण संदर्भ को भी ट्रिगर करेगा, और यह सामग्री को क्लिप नहीं करेगा।

— हैरी रॉबिन्स

17

मुझे आधिकारिक CLEARFIX-Method में एक बग मिला है: DOT में फ़ॉन्ट-आकार नहीं है। और यदि आप height = 0अपने DOM- ट्री में पहले तत्व को सेट करते हैं और कक्षा "क्लीयरफिक्स" है, तो आपको 12px के पेज के निचले भाग में एक मार्जिन होगा। :)

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

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

— मार्टिन
स्रोत

15

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

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

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

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

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

— paulslater19
स्रोत

1

हां, 2011 के मध्य तक, यह मेरा पसंदीदा समाधान है। यदि आवश्यक हो तो (टालना overflow: hidden) यह आपको बॉक्स से बाहर वस्तुओं को रखने की अनुमति देता है ।

— साइमन ईस्ट

10

बूटस्ट्रैप से उपसर्ग:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

— एरिक
स्रोत

बूटस्ट्रैप का यह कौन सा संस्करण है?

— एरिक

8

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

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

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

— सलमान वॉन अब्बास
स्रोत

IE7 में काम नहीं करेगा क्योंकि इसमें CSS pseudoelements का कोई समर्थन नहीं है।

— सुपरलुमिनरी

4

... इसीलिए उन्होंने कहा "IE8 + के साथ संगत।" अधिकांश वेबसाइटों को अब IE7 का समर्थन करने की आवश्यकता नहीं है, यह उपयोग दुनिया भर में 1% से कम है। theie7countdown.com

— जस्टिन

8

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

जब भी संभव हो फ्लोट्स से दूर रहें

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

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

फ्लोट दुर्व्यवहार और विफल क्लीयर

सबसे पहले, कभी-कभी, आप सोच सकते हैं कि आप तैरने से सुरक्षित हैं जब तक कि आपके जीवनरक्षक को पंचर नहीं किया जाता है और आपका HTML प्रवाह डूबने लगता है:

नीचे दिए गए कोडपेन 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

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

बचाव के लिए सीएसएस Clearfix

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

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

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

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

— उमर
स्रोत

2

clearक्लास के नाम के साथ काम न करने का कारण यह है कि आपकी विशेषता classगलत है। आपने जो लिखा है वह classsएक अतिरिक्त के साथ है s।

— शाहबलूत

आपका उदाहरण त्रुटियों को सही करने के बाद भी आपके द्वारा प्रदर्शित किए गए दावे को प्रदर्शित नहीं करता है।

— मोनिका को बहाल करना - notmaynard

7

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

— नील जी
स्रोत

नील, मुझे लगता है कि परेशानी तब होती है जब आप अपने दोनों स्तंभों (या एक पृष्ठभूमि रंग / छवि) के चारों ओर एक सीमा चाहते हैं, आपको एक आवरण अनुभाग की आवश्यकता होती है जिसमें युक्त हैक की आवश्यकता होती है।

— साइमन ईस्ट

5

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

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

मैं भी display: hiddenसमाधान का उपयोग करता हूं , जो बहुत अच्छा है और इसके लिए कोई अतिरिक्त श्रेणी घोषणा या html मार्कअप की आवश्यकता नहीं है ... लेकिन कभी-कभी आपको कंटेनर को ओवरफ्लो करने के लिए तत्वों की आवश्यकता होती है, उदाहरण के लिए। सुंदर रिबन और sashes

— duggi
स्रोत

5

overflow: hiddenमुझे लगता है कि आपका मतलब है

— ajbeaven

कुछ समूह नामक समूह का उपयोग करने की सलाह देते हैं जो चीजों को अधिक अर्थपूर्ण बनाता है। मुझे यकीन नहीं है कि यह क्यों नहीं पकड़ा गया

— डेमन

im पूरी तरह से इस स्थिति को पीछे हटा रहा है। मैं अभी स्पष्टता का उपयोग करता हूं। लेकिन बहुत आम कंटेनरों पर, मैं वर्ग विशेषता प्रदूषण पर कटौती करने के लिए इसे सीएसएस में 'बेक' करता हूं। इसके अलावा, इसका नामकरण 'समूह' अच्छा लगता है। साथ ही टाइप करने के लिए कम

— चार्ट

5

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

— मूसा बट
स्रोत

4

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

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

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

— जॉन जिओ
स्रोत

2

ऐसा इसलिए है क्योंकि आप के साथ एक लाइन जोड़ रहे हैं ., बस का उपयोग करेंcontent: ""

— Forty

4

SASS के साथ, उपसर्ग है:

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

और इसका उपयोग इस तरह किया जाता है:

.container {
    @include clearfix;
}

यदि आप नया उपसर्ग चाहते हैं:

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

— fernandopasik
स्रोत

4

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

— JMU
स्रोत

4

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

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

#test {
  overflow:hidden; // or auto;
  _height:1%; forces hasLayout in IE6
}

<div id="test">
  <div style="floatLeft"></div>
  <div style="random"></div>
</div>

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

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

वास्तव में अभी तक किसी अन्य प्रकार के समाशोधन की आवश्यकता नहीं है। शायद यह मेरा HTML लिखने का तरीका है।

— ड्रेको
स्रोत

1

मैं किसी भी तत्व को साफ किए बिना HTML लिखने के आपके तरीके का अध्ययन करना चाहूंगा। क्या आप कुछ लिंक पोस्ट कर सकते हैं?

— Starx

4

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

display: flow-root;

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

जानकारी: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root https://www.chromestatus.com/feature/5769454877147136

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

— डेमियन गोल्डिंग
स्रोत

3

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

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

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

— थियरी कोब्लेन्टज़
स्रोत

3

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

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

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

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

— गौरांग
स्रोत

2

HTML का 1 लाइन काम करने के लिए सिर्फ css हैक का उपयोग करने की कोशिश क्यों की जाती है। और क्यों नहीं अर्थिक html tu पुट का उपयोग करने के लिए लाइन पर लौटने के लिए?

Fo me का उपयोग करना बेहतर है:

<br style="clear:both" />

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

इसका लाभ:

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

— Phpascal
स्रोत

2

मान लें कि आप इस 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 */
}

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

— टिम हुइन्ह
स्रोत

2

अन्य उपसर्गों के विपरीत, यहां कंटेनरों के बिना एक खुले सिरे वाला है

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

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

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

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

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

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

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

— सर्ज स्ट्रोबंड
स्रोत

2

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

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

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 */
.cf {
    *zoom: 1;
}

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

— जॉन सेलर्स
स्रोत

0

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

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

*:first-child+html .cb{zoom: 1} /* for IE7 */

और अपने माता-पिता को वर्ग "cb" जोड़ें:

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

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

— हकान
स्रोत

0

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

स्निपेट का विस्तार करें

— विपुल वघासिया
स्रोत

-2

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

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

मुझे इस पद्धति से कोई समस्या नहीं है।

— Torkel
स्रोत

2

मुझे लगता है कि हम इस समाधान के साथ अतिरिक्त मार्कअप और इनलाइन शैलियों से बचने की कोशिश कर रहे हैं। यह निर्भर करता है कि मैं मानने के साथ आपके सबसे खुशियों के साथ क्या समझौता करता हूं

— सैम मुर्रे-सटन

1

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

— zznq

आपको एक उचित क्लोजिंग टैग के साथ <div style = "clear: दोनों"> </ div> कहने की आवश्यकता है, जो कि XHTML कंपीटेंट है। मैं jQuery के मुद्दों है जब ऐसा नहीं कर रहा है

— Simon_Weaver

1

विडंबना यह है कि "माना जाता-टू-बी-आत्म बंद" <div/> है एक्स (एचटी) एमएल अनुरूप है, लेकिन एचटीएमएल संगत नहीं है के रूप में सेवा दस्तावेज़ों के लिए है, इसलिए text/htmlसभी ब्राउज़रों खुली हुई टैग के रूप में यह व्यवहार करेगा। text/htmlदस्तावेजों के लिए सेल्फ-क्लोजिंग टैग जैसी कोई बात नहीं है , चाहे कोई भी हो , दुर्भाग्य से।

— इल्या स्ट्रेल्ट्सिन

-2

मेरी पसंदीदा विधि नीचे के रूप में मेरी css / scss दस्तावेज़ में एक स्पष्ट वर्ग बनाना है

.clearfix{
    clear:both
}

और फिर नीचे दिखाए गए अनुसार मेरे HTML दस्तावेज़ में कॉल करें

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

— एरिक
स्रोत

-2

जब हम div एलिमेंट के अंदर फ्लोट प्रॉपर्टीज का उपयोग करते हैं तो यह सिंपल क्लियरफिक्स इस इश्यू को क्लियर कर देता है। अगर हम दो डिव तत्वों को फ्लोट के रूप में इस्तेमाल करते हैं: लेफ्ट; और फ्लोट के रूप में अन्य एक: सही; हम दो div तत्व के अभिभावक के लिए क्लीयरफिक्स का उपयोग कर सकते हैं। यदि हम स्पष्ट उपसर्गों का उपयोग करने से इनकार करते हैं तो नीचे दी गई सामग्री से भर जाते हैं और साइट संरचना टूट जाएगी।

— मोहम्मद आसिफ
स्रोत

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

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

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

क्लियरफिक्स रीलोडेड

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

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

माइक्रो क्लीयरिक्स

ओवरफ्लो संपत्ति

PIE: आसान समाशोधन विधि

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

कमियां

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

ब्लॉकिंग प्रारूप संदर्भ

सबसे मजबूत उपाय

इसे स्वयं आज़माएं

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

टिप्पणियाँ

जब भी संभव हो फ्लोट्स से दूर रहें

फ्लोट दुर्व्यवहार और विफल क्लीयर

बात यहीं खत्म नहीं होती

बचाव के लिए सीएसएस Clearfix

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

अन्य उपसर्गों के विपरीत, यहां कंटेनरों के बिना एक खुले सिरे वाला है

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

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

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

क्लियरफिक्स रीलोडेड

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

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

माइक्रो क्लीयरिक्स

ओवरफ्लो संपत्ति

PIE: आसान समाशोधन विधि

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

कमियां

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

ब्लॉकिंग प्रारूप संदर्भ

सबसे मजबूत उपाय

इसे स्वयं आज़माएं

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

टिप्पणियाँ

जब भी संभव हो फ्लोट्स से दूर रहें

फ्लोट दुर्व्यवहार और विफल क्लीयर

बात यहीं खत्म नहीं होती

बचाव के लिए सीएसएस Clearfix

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

अन्य उपसर्गों के विपरीत, यहां कंटेनरों के बिना एक खुले सिरे वाला है

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