सीएसएस नियम "स्पष्ट: दोनों" क्या करता है?

Question

निम्नलिखित सीएसएस नियम क्या करता है:

.clear { clear: both; }

और हमें इसका उपयोग करने की आवश्यकता क्यों है?

Comments

जब आप CSS का उपयोग कर रहे हैं floatऔर नीचे या अगले तत्व चाहते हैं, दाएं या बाएं नहीं।

— रिज

तत्व के स्पष्ट होने पर उपयोग किए जाने पर किसी निर्दिष्ट तत्व के बाईं और दाईं ओर के किसी भी अस्थायी तत्वों की अनुमति नहीं है: दोनों

— जैकएक्सू

Answer 1

मैं यह नहीं समझा रहा हूँ कि कैसे फ़्लोट्स यहाँ (विस्तार से) काम करते हैं, क्योंकि यह सवाल आम तौर पर ध्यान केंद्रित करता है कि उपयोग क्यों करते हैं clear: both;या clear: both;वास्तव में क्या करते हैं ...

मैं इस उत्तर को सरल, और बिंदु पर रखूँगा, और आपको रेखांकन करके समझाऊँगा कि clear: both;यह क्यों आवश्यक है या यह क्या करता है ...

आम तौर पर डिजाइनर तत्वों को बाएं या दाएं तैरते हैं, जो दूसरी तरफ एक खाली स्थान बनाता है जो अन्य तत्वों को शेष स्थान को ऊपर ले जाने की अनुमति देता है।

वे तत्वों को क्यों तैरते हैं?

जब तत्वों को 2 ब्लॉक स्तर के तत्वों की आवश्यकता होती है, तो तत्व फ्लोट किए जाते हैं। उदाहरण के लिए, हम एक मूल वेबसाइट डिजाइन करना चाहते हैं, जिसमें नीचे की तरह एक लेआउट है ...

डेमो इमेज का लाइव उदाहरण ।

डेमो के लिए कोड

/*  CSS:  */

* { /* Not related to floats / clear both, used it for demo purpose only */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

header, footer {
    border: 5px solid #000;
    height: 100px;
}

aside {
    float: left;
    width: 30%;
    border: 5px solid #000;
    height: 300px;
}

section {
    float: left;
    width: 70%;
    border: 5px solid #000;
    height: 300px;
}

.clear {
    clear: both;
}

<!-- HTML -->
<header>
    Header
</header>
<aside>
    Aside (Floated Left)
</aside>
<section>
    Content (Floated Left, Can Be Floated To Right As Well)
</section>
<!-- Clearing Floating Elements-->
<div class="clear"></div>
<footer>
    Footer
</footer>

नोट: आप को जोड़ने के लिए हो सकता है header, footer, aside, sectionके रूप में (और अन्य एचटीएमएल 5 तत्वों) display: block;स्पष्ट रूप से उल्लेख है कि तत्वों ब्लॉक स्तर तत्व हैं के लिए अपने स्टाइलशीट में।

स्पष्टीकरण:

मेरे पास एक बुनियादी लेआउट, 1 हेडर, 1 साइड बार, 1 सामग्री क्षेत्र और 1 पाद है।

के लिए कोई फ़्लोट नहीं होता है header, इसके बाद asideटैग आता है जो मैं अपनी वेबसाइट साइडबार के लिए उपयोग करूंगा, इसलिए मैं तत्व को बाईं ओर तैरने दूंगा।

नोट: डिफ़ॉल्ट रूप से, ब्लॉक स्तर का तत्व दस्तावेज़ को 100% चौड़ाई तक ले जाता है, लेकिन जब इसे बाएँ या दाएँ फ़्लोट किया जाता है, तो यह आपके द्वारा रखी गई सामग्री के अनुसार आकार देगा।

1. ब्लॉक स्तर तत्व के सामान्य व्यवहार
2. ब्लॉक स्तर तत्व के अस्थायी व्यवहार

तो जैसा कि आप ध्यान दें, बाईं ओर तैरने divवाला स्थान अपने सही अप्रयुक्त स्थान को छोड़ देता है, जो divइसके बाद शेष स्थान पर शिफ्ट होने की अनुमति देगा ।

1. divअगर वे फ्लोट नहीं हैं तो एक के बाद एक रेंडर करेंगे
2. div एक-दूसरे के बगल में शिफ्ट होगा यदि बाएं या दाएं तैरते हैं

ठीक है, तो यह है कि ब्लॉक स्तर के तत्व बाएं या दाएं तैरते समय कैसे व्यवहार करते हैं, इसलिए अब क्यों clear: both;आवश्यक है और क्यों?

तो अगर आप लेआउट डेमो में ध्यान दें - यदि आप भूल गए हैं, तो यहाँ यह है ..

मैं नामक एक वर्ग का उपयोग कर रहा हूं .clearऔर यह एक संपत्ति रखता है जिसका clearमूल्य कहा जाता है both। तो देखते हैं कि इसकी आवश्यकता क्यों है both।

मैंने फ्लोट किया है asideऔर sectionतत्वों को बाईं ओर है, इसलिए एक परिदृश्य को मानें, जहां हमारे पास एक पूल है, जहां headerठोस भूमि है, asideऔर sectionपूल में तैर रहे हैं और पाद फिर से ठोस भूमि है, कुछ इस तरह से ।।

तो नीले पानी का कोई पता नहीं है कि फ्लोट किए गए तत्वों का क्षेत्र क्या है, वे पूल या छोटे से बड़े हो सकते हैं, इसलिए यहां एक सामान्य मुद्दा आता है जो सीएसएस शुरुआती के 90% को परेशान करता है: कंटेनर तत्व की पृष्ठभूमि क्यों नहीं खिंची जाती है जब यह तैरते हुए तत्व रखता है। ऐसा इसलिए है क्योंकि कंटेनर तत्व यहां एक पीओएल है और पीओओएल को पता नहीं है कि कितनी वस्तुएं तैर रही हैं, या फ्लोट किए गए तत्वों की लंबाई या चौड़ाई क्या है, इसलिए यह बस खिंचाव नहीं करेगा।

1. दस्तावेज़ का सामान्य प्रवाह
2. धाराएँ वाम की ओर तैरती हैं
3. कंटेनर के पृष्ठभूमि रंग को फैलाने के लिए साफ़ किए गए फ़्लोटेड तत्व

( यह करने के लिए साफ तरीके से इस उत्तर के अनुभाग को देखें ^{[स्पष्ट करें]} । मैं divस्पष्टीकरण उद्देश्य के लिए जानबूझकर एक खाली उदाहरण का उपयोग कर रहा हूं )

मैंने ऊपर 3 उदाहरण प्रदान किए हैं, 1 सामान्य दस्तावेज़ प्रवाह है जहां redपृष्ठभूमि बस के रूप में प्रस्तुत करना होगा क्योंकि कंटेनर किसी भी फ्लोटेड ऑब्जेक्ट को नहीं रखता है।

दूसरे उदाहरण में, जब ऑब्जेक्ट को बाईं ओर फ्लोट किया जाता है, तो कंटेनर तत्व (POOL) फ्लोट किए गए तत्वों के आयामों को नहीं जान पाएंगे और इसलिए यह फ्लोट किए गए तत्वों की ऊँचाई तक नहीं पहुंचेंगे।

उपयोग करने के बाद clear: both;, कंटेनर तत्व को उसके फ्लोटेड तत्व आयामों तक बढ़ाया जाएगा।

clear: both;उपयोग किया जाने वाला एक अन्य कारण तत्व को शेष स्थान में स्थानांतरित करने से रोकना है।

कहते हैं कि आप 2 तत्वों को एक साथ और उनके नीचे एक और तत्व चाहते हैं ... तो आप 2 तत्वों को बाईं ओर तैरेंगे और आप उनके नीचे दूसरे तत्वों को चाहते हैं।

1. divsectionबचे हुए स्थान में स्थानांतरित होने के कारण तैरता छोड़ दिया गया
2. फ़्लोट को divसाफ़ किया जाता है ताकि sectionटैग फ्लोटेड divs के नीचे रेंडर हो जाए

---

पहला उदाहरण

---

2 उदाहरण

अंतिम लेकिन कम से कम नहीं, footerटैग किए गए तत्वों के बाद टैग प्रदान किया जाएगा क्योंकि मैंने clearअपने footerटैग घोषित करने से पहले कक्षा का उपयोग किया है , जो यह सुनिश्चित करता है कि सभी फ्लोट किए गए तत्व (बाएं / दाएं) उस बिंदु तक साफ हो गए हैं।

---

clearfix

समाशोधन के लिए आ रहा है जो तैरने से संबंधित है। जैसा कि पहले से ही @Elky द्वारा निर्दिष्ट किया गया है , जिस तरह से हम इन झांकियों को साफ कर रहे हैं, वह ऐसा करने का एक साफ तरीका नहीं है क्योंकि हम एक खाली divतत्व का उपयोग कर रहे हैं जो एक divतत्व नहीं है । इसलिए यहाँ स्पष्टता आती है।

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

किसी भी आवरण तत्व को तैरते हुए तत्वों को साफ करने के लिए, हम उपयोग कर सकते हैं

.wrapper_having_floated_elements:after {  /* Imaginary class name */
  content: "";
  clear: both;
  display: table;
}

उसके :afterलिए मेरे द्वारा उपयोग किए गए छद्म तत्व पर ध्यान दें class। इससे पहले कि यह अपने आप बंद हो जाए, रैपर तत्व के लिए एक आभासी तत्व बनाया जाएगा। अगर हम डोम में देखें तो आप देख सकते हैं कि यह डॉक्यूमेंट ट्री में कैसे दिखता है।

इसलिए यदि आप देखते हैं, तो यह फ्लोट किए गए बच्चे के बाद प्रदान किया जाता है, divजहां हम फ्लोट्स को साफ करते हैं, जो कि संपत्ति के divसाथ एक खाली तत्व के बराबर कुछ भी नहीं है clear: both;जो हम इसके लिए भी उपयोग कर रहे हैं। अब क्यों display: table;और contentइस जवाब के दायरे से बाहर है लेकिन आप यहां छद्म तत्व के बारे में अधिक जान सकते हैं ।

ध्यान दें कि यह IE8 में भी काम करेगा क्योंकि IE8 :afterछद्म का समर्थन करता है ।

---

मूल उत्तर:

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

प्रदर्शन:

------------------ ----------------------------------
div1(Floated Left) Other div takes up the space here
------------------ ----------------------------------

अब क्या होगा अगर आप नीचे दिए गए अन्य div रेंडर करना चाहते हैं div1, तो आप इसका उपयोग करेंगे clear: both;ताकि यह सुनिश्चित हो सके कि आप सभी फ्लोट्स को छोड़ दें या दाएं

------------------
div1(Floated Left)
------------------
<div style="clear: both;"><!--This <div> acts as a separator--></div>
----------------------------------
Other div renders here now
----------------------------------

Comments

यदि आपने फ़्लोट्स के बारे में कभी नहीं सुना है, तो मेरा सुझाव है कि आप पहले फ़्लोट्स का एक परिचय पढ़ें --- उदाहरण के लिए, अगले उत्तर में लिंक देखें। फिर वापस आकर इस उत्तर को पढ़ें - इससे समझ में आएगा।

— osa

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

— मदारा का घोस्ट

इसे पढ़ने से पहले संदर्भित करने के लिए संबंधित संक्षिप्त उत्तर, बस एक सामान्य विचार प्राप्त करने के लिए .. stackoverflow.com/questions/16568272/…

— श्री एलियन

@ श्री-विदेशी अच्छा उदाहरण है, तथापि के मामले में jsfiddle.net/N82UD/1 जब आप स्क्रीन हटना, वहाँ नाव साथ एक समस्या है और "को मंजूरी दे दी" तत्व प्रवाह का पालन नहीं कर रहा है: jsfiddle.net/N82UD/138 यह तैरते हुए आइटम 2 के स्थान पर ले जाता है

— उमर

@Carlo: एक विकल्प जो उदाहरण के लिए Twitter बूटस्ट्रैप जैसे टेम्पलेट्स में बहुत उपयोग किया जाता है; display: inline-blockएक तत्व पर रखना है , और माता-पिता पर आप उपयोग कर सकते हैं text-align: left, text-align: centerया text-align: rightउदाहरण के लिए।

— दान

Answer 2

clearसंपत्ति इंगित करता है कि बाएं, सही है या एक तत्व के दोनों ओर एक ही ब्लॉक स्वरूपण संदर्भ में पहले जारी तत्वों के निकट नहीं हो सकता। साफ किए गए तत्वों को संबंधित तैरने वाले तत्वों के नीचे धकेल दिया जाता है। उदाहरण:

clear: none; तत्व तैरते हुए तत्वों के समीप रहता है

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-none {
  clear: none;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-none">clear: none;</div>

clear: left; तत्व नीचे तैरने वाले तत्वों के नीचे धकेल दिया गया

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.clear-left {
  clear: left;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-left">clear: left;</div>

clear: right; तत्व नीचे तैरने वाले तत्वों के नीचे धकेल दिया गया

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-right {
  clear: right;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-right">clear: right;</div>

clear: both; तत्व सभी अस्थायी तत्वों के नीचे धकेल दिया गया

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.float-right {
  float: right;
  width: 60px;
  height: 60px;
  background: #CEF;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="float-right">float: right;</div>
<div class="clear-both">clear: both;</div>

clear वर्तमान ब्लॉक स्वरूपण संदर्भ के बाहर फ़्लोट्स को प्रभावित नहीं करता है

body {
  font-family: monospace;
  background: #EEE;
}
.float-left {
  float: left;
  width: 60px;
  height: 120px;
  background: #CEF;
}
.inline-block {
  display: inline-block;
  background: #BDF;
}
.inline-block .float-left {
  height: 60px;
}
.clear-both {
  clear: both;
  background: #FFF;
}

<div class="float-left">float: left;</div>
<div class="inline-block">
  <div>display: inline-block;</div>
  <div class="float-left">float: left;</div>
  <div class="clear-both">clear: both;</div>
</div>

Comments

अति उत्कृष्ट। यह सबसे अच्छा जवाब है। मुझे आश्चर्य है कि एक और उत्तर क्यों स्वीकार किया गया।

— आरा

अगर हम display: inline-block;इस परिदृश्य से सीएसएस संपत्ति को हटा दें तो क्या होगा ? यह inline-blockमूल तत्व को उसके सहोदर तत्व तक ले जाएगा, जिसमें कक्षा है float-left। जो "स्पष्ट वर्तमान ब्लॉक प्रारूपण संदर्भ के बाहर झांकियों को प्रभावित नहीं करता है" बयान को गलत बनाता है। कृपया कोई समझा सकता है?

— शशिरका वैद्यरत्न

@SashrikaWaidyarathna: एक मूल तत्व अपने बच्चों के लिए एक ब्लॉक प्रारूपण संदर्भ उत्पन्न नहीं करता है । आपके उदाहरण में (ए) हटाने का display: inline-blockमतलब है कि यह अब ब्लॉक स्वरूपण संदर्भ उत्पन्न नहीं करता है (बी) उस तत्व के अंदर फ्लोट्स / क्लीयर करता है और पहले फ्लोट सभी एक ही ब्लॉक स्वरूपण संदर्भ (व्यूपोर्ट) का हिस्सा बन जाते हैं।

— सलमान ए

@ साल्मन, स्पष्टीकरण के लिए धन्यवाद css विनिर्देशन। मुझे ब्लॉक फॉरमेटिंग संदर्भ की परिभाषा के बारे में पता नहीं था।

— शशिरिका वैद्यरत्न

सुंदर पिचाई डॉपेलगैंगर?

— मनोज कुमार

Answer 3

सीएसएस फ्लोट और स्पष्ट

नमूना बेला

बस clear:bothइसके divसाथ संपत्ति को हटाने की कोशिश करें class sampleऔर देखें कि यह कैसे चल रहा है divs।

Answer 4

श्री एलियन का जवाब एकदम सही है, लेकिन वैसे भी मैं इस्तेमाल करने की सलाह नहीं देता <div class="clear"></div>क्योंकि यह सिर्फ एक हैक है जो आपके मार्कअप को गंदा कर देता है। यह divखराब संरचना और शब्दार्थ के मामले में बेकार है , यह आपके कोड को लचीला नहीं बनाता है। कुछ ब्राउज़रों में यह div अतिरिक्त ऊंचाई का कारण बनता है और आपको इसे और height: 0;भी बदतर बनाना होगा। लेकिन असली परेशानी तब शुरू होती है जब आप अपने तैरते हुए तत्वों के आसपास की पृष्ठभूमि या सीमा को जोड़ना चाहते हैं - यह सिर्फ ढह जाएगा क्योंकि वेब को बुरी तरह से डिजाइन किया गया था । मैं फ्लोट किए गए तत्वों को कंटेनर में लपेटने की सलाह देता हूं जिसमें सीएसएस नियम स्पष्ट है । यह हैक के रूप में अच्छी तरह से है, लेकिन सुंदर और अधिक लचीला उपयोग करने के लिए और मानव और एसईओ रोबोट के लिए पठनीय है।

Comments

इस अन्य पोस्ट में अधिक विवरण हैं clearfix: stackoverflow.com/questions/211383/…

— बिल होआग

Answer 5

जब आप चाहते हैं कि एक तत्व नीचे अन्य तत्व में रखा जाए तो आप सीएसएस में इस कोड का उपयोग करें। इसका उपयोग झांकियों के लिए किया जाता है।

यदि आप सामग्री तैरते हैं तो आप बाएं या दाएं तैर सकते हैं ... इसलिए एक सामान्य लेआउट में आपके पास एक बाएं नौसेना, एक सामग्री div और एक पाद हो सकता है।

यह सुनिश्चित करने के लिए कि फ़ूटर इन दोनों फ़्लोट्स से नीचे रहता है (यदि आपने बाएँ और दाएँ फ़्लोट किया है) तो आप फ़ूटर को इस प्रकार रखें clear: both।

इस तरह यह दोनों झांकियों के नीचे रहेगा।

(यदि आप केवल बाएं समाशोधन कर रहे हैं तो आपको केवल वास्तव में इसकी आवश्यकता है clear: left;।)

इस ट्यूटोरियल से गुजरें:

Comments

क्या ट्यूटोरियल?

— पीटर मोर्टेंसन