कोर्स सूची

CSS उच्च गुणवत्ता शिक्षा

• CSS ऑफ़ द बुक
• CSS इंट्रोडक्शन
• CSS बेसिक ग्रामर
• CSS एडवांस ग्रामर
• CSS डीरीवेटिव सेलेक्टर
• CSS id सेलेक्टर
• CSS क्लास सेलेक्टर
• CSS बनाना
• CSS बैकग्राउंड
• CSS टेक्स्ट
• CSS फ़ॉन्ट
• CSS लिस्ट

CSS फ़्रेम मॉडल

• CSS फ़्रेमवर्क अवधारणा
• CSS माउंटिंग
• CSS बॉर्डर
• CSS माउंटिंग
• CSS माउंटिंग मर्जर

CSS स्थानांतरण

• CSS पोजिशनिंग अवधारणा
• CSS रिलेटिव पोजिशनिंग
• CSS एब्सोल्यूट पोजिशनिंग
• CSS फ्लोट

CSS चयनक

• CSS एलीमेंट सेलेक्टर
• CSS सेलेक्टर ग्रुपिंग
• CSS क्लास सेलेक्टर विस्तृत
• CSS ID सेलेक्टर विस्तृत
• CSS एट्रिब्यूट सेलेक्टर विस्तृत
• CSS डाउनर सेलेक्टर
• CSS चाइल्ड सेलेक्टर
• CSS अड्जैक्ट सिस्टर सेलेक्टर

चयनीय कोर्स

कोर्स सिफारिश:

• CodeW3C.com बॉक्स ऑफ़ ट्रिंब्ल

फ्लॉटिंग बॉक्स को बाईं या दाईं ओर की ओर ले जाया जा सकता है, जब तक कि इसका बाह्य किनारा आवरण बॉक्स या दूसरे फ्लॉटिंग बॉक्स के किनारे से टकराने तक。

फ्लॉटिंग बॉक्स दस्तावेज़ के सामान्य स्ट्रीम में नहीं होते, इसलिए दस्तावेज़ के सामान्य स्ट्रीम में ब्लॉक बॉक्स फ्लॉटिंग बॉक्स के अस्तित्व के बिना व्यवहार करते हैं。

CSS फ्लोट

यहाँ के चित्र को देखें, जब बॉक्स 1 दाईं ओर की ओर फ्लॉट करता है, तो यह दस्तावेज़ स्ट्रीम से बाहर निकलता है और दाईं ओर की ओर जाता है, जब तक कि इसका दाईं किनारा आवरण बॉक्स के दाईं किनारे से टकराने तक:

यहाँ के चित्र को देखें, जब बॉक्स 1 बाईं ओर की ओर फ्लॉट करता है, तो यह दस्तावेज़ स्ट्रीम से बाहर निकलता है और बाईं ओर की ओर जाता है, जब तक कि इसका बाईं किनारा आवरण बॉक्स के बाईं किनारे से टकराने तक। क्योंकि यह दस्तावेज़ स्ट्रीम में नहीं है, इसलिए यह स्थान नहीं लेता, वास्तव में बॉक्स 2 को ढक देता है, जिससे बॉक्स 2 दृश्य से गायब हो जाता है。

यदि सभी तीन बॉक्स को बाईं ओर की ओर ले जाया जाए, तो बॉक्स 1 बाईं ओर की ओर फ्लॉट करता है जब तक कि वह आवरण बॉक्स से टकराने तक, और अन्य दो बॉक्स बाईं ओर की ओर फ्लॉट करते हैं जब तक कि वे पिछले फ्लॉटिंग बॉक्स से टकराने तक。

इस चित्र के अनुसार, यदि आवरण बॉक्स बहुत छोटा है और तीन फ्लॉटिंग एलिमेंटों को आगे की ओर लाने के लिए बहुत स्थान नहीं है, तो अन्य फ्लॉटिंग बॉक्स नीचे की ओर जाता है, जब तक कि पर्याप्त स्थान नहीं मिलता है। यदि फ्लॉटिंग एलिमेंट की ऊंचाई अलग-अलग है, तो जब वे नीचे की ओर जाते हैं, तो वे अन्य फ्लॉटिंग एलिमेंटों द्वारा 'अवरुद्ध' हो सकते हैं:

CSS float प्रोपर्टी

CSS में, हम एलिमेंट के फ्लॉट को फ्लॉट प्रॉपर्टी के माध्यम से प्रदर्शित करते हैं。

फ्लॉट प्रॉपर्टी के बारे में अधिक जानकारी के लिए, संदर्भ हान्डबुक देखें:CSS float प्रोपर्टी。

रूबर और साफी

फ्लॉटिंग बॉक्स के बगल का रूबर बॉक्स घटा दिया जाता है, इससे फ्लॉटिंग बॉक्स को स्थान छोड़ा जाता है, रूबर बॉक्स फ्लॉटिंग बॉक्स के चारों ओर लपटता है。

इसलिए, फ्लॉटिंग बॉक्स बनाने से टेक्स्ट को इमेज के चारों ओर लपटने की संभावना होती है:

यदि आप फ्लॉटिंग बॉक्स के आस-पास रूबर बॉक्स को रोकना चाहते हैं, तो इस बॉक्स पर अनुप्रयोग करना चाहिए clear एट्रिब्यूटclear एट्रिब्यूट का मूल्य left, right, both या none हो सकता है, जो फ़ॉक्स के कौन-कौन से किनारे नहीं रहने चाहिए।

इस प्रभाव को प्राप्त करने के लिए, जिस एलिमेंट को सफाई करना है, उसके मूल अनुमान के ऊपर विद्युत उत्पाद को जोड़ना होगा:मूल अनुमानऊपर के विद्युत उत्पाद को पर्याप्त जगह देकर एलिमेंट के ऊपरी किनारे को फ्लॉटिंग बॉक्स के नीचे आगे आने देता है:

यह एक उपयोगी औजार है, जो चारों ओर के एलिमेंट को फ्लॉटिंग एलिमेंट के लिए स्थान छोड़ता है।

इस चित्र को टेक्स्ट बॉक्स के बाएं ओर फ्लॉट करना चाहते हैं, और चित्र और टेक्स्ट को एक अन्य बैग एलिमेंट में घेरना चाहते हैं जो बैगफर्न और बॉर्डर रंग का रंग है। आपको नीचे दिए गए कोड लिखना होगा:

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>कुछ पाठ</p>
</div>

इस मामले में, एक समस्या उभरी है। क्योंकि फ्लॉटिंग एलिमेंट दस्तावेज़ प्रवाह से बाहर हो गया है, इसलिए चित्र और पाठ को घेरने वाला div जगह नहीं लेता है।

कैसे घेरी एलिमेंट दृश्यमान रूप से फ्लॉटिंग एलिमेंट को घेर सकते है? इस एलिमेंट के भीतर कहीं एक स्थान पर clear लगाना होगा:

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

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>कुछ पाठ</p>
<div class="clear"></div>
</div>

इससे हमारा चाहते हुए परिणाम मिलेगा, लेकिन अतिरिक्त कोड जोड़ना पड़ेगा। अक्सर, एक ऐसा एलिमेंट होता है जिसे clear लगाया जा सकता है, लेकिन कभी-कभी लेयाउती के लिए अर्थहीन टैग जोड़ना पड़ता है।

हालांकि, हमें एक और तरीका भी है, जो कि डिव को फ्लॉट करना है:

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>कुछ पाठ</p>
</div>

इससे हमारा चाहते हुए परिणाम मिलेगा। दुर्भाग्य से, अगला एलिमेंट इस फ्लॉटिंग एलिमेंट के प्रभाव से प्रभावित होगा। इस समस्या को सुलझाने के लिए, कुछ लोग लेयाउती के सभी चीजों को फ्लॉट करना चाहते हैं और फिर उचित समझदार एलिमेंट (अक्सर साइट का पाद) को इन फ्लॉट को सफाई करने के लिए उपयोग करते हैं। यह अनावश्यक टैग को कम करने या नष्ट करने में मदद करता है।

वास्तव में, CodeW3C.com साइट पर सभी पृष्ठ इसी प्रौद्योगिकी का उपयोग करते हैं, अगर आप हमारे CSS फ़ाइल को खोलें, तो आप देखेंगे कि हमने पाद के div को सफाई किया है और पाद के ऊपरी तीन div बाईं ओर फ्लॉट कर दिए हैं।

CSS clear प्रोपर्टी

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

टूलबॉक्स

CSS रेफरेंस मैनुअल

CSS इनस्टांस

CSS टेस्ट

CSS ट्यूटोरियल

सापोर्टर लिंक