फ्लोट - सीएसएस-ट्रिक्स

floatसीएसएस में संपत्ति स्थिति और वेब पन्नों पर लेआउट के लिए प्रयोग किया जाता है।

.module ( float: left; )

मूल्यों

• none: तत्व तैरता नहीं है। यह प्रारंभिक मूल्य है।
• left: तत्व को उसके कंटेनर के बाईं ओर तैरता है।
• right: तत्व को उसके कंटेनर के दाईं ओर तैरता है।
• inherit: तत्व अपने माता-पिता की फ्लोट दिशा को विरासत में देता है।

नोट: एक तत्व जो मंगाई गई है वह स्वचालित रूप से है display: block;

फ्लोट का मतलब क्या है?

के उद्देश्य और उत्पत्ति को समझने के लिए float, हम प्रिंट डिजाइन देख सकते हैं। एक प्रिंट लेआउट में, चित्रों को पृष्ठ में सेट किया जा सकता है जैसे कि पाठ उनके चारों ओर आवश्यकतानुसार लपेटता है। यह आमतौर पर और उचित रूप से "टेक्स्ट रैप" कहा जाता है। यहाँ उस का एक उदाहरण है।

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

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

डेमो

यह डेमो एक लेख को दो छवियों के साथ दिखाता है: एक सेट टू float: leftऔर एक सेट टू float: right। फ्लोट्स को बंद और चालू करने के लिए "टॉगल फ्लोट्स" बटन दबाएं।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन फ्लोट उदाहरण देखें।

लेआउट के लिए फ़्लोट्स

छवियों के चारों ओर पाठ लपेटने के सरल उदाहरण के अलावा, संपूर्ण वेब लेआउट बनाने के लिए फ़्लोट्स का उपयोग किया जा सकता है ।

फ्लोट छोटे उदाहरणों में लेआउट के लिए भी सहायक होते हैं। उदाहरण के लिए एक वेब पेज के इस छोटे से क्षेत्र को लें। यदि हम floatअपनी अवतार छवि के लिए उपयोग करते हैं, जब वह छवि बदल जाती है, तो बॉक्स में पाठ आकार को समायोजित करेगा।

इसी लेआउट को कंटेनर पर सापेक्ष स्थिति और अवतार पर पूर्ण स्थिति के साथ ही पूरा किया जा सकता है। लेकिन, जब यह इस तरह से किया जाता है, तो पाठ अवतार से अप्रभावित हो जाएगा, और एक आकार परिवर्तन पर वापस नहीं जा सकेगा।

डेमो

यह डेमो float: leftलागू के साथ एक अवतार दिखाता है। अवतार छवि का एक व्यापक संस्करण देखने के लिए "छवि आकार टॉगल करें" बटन दबाएँ। ध्यान दें कि पाठ छवि पर चलने के बजाय छवि को समायोजित करने के लिए प्रतिक्षेप करता है।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा पेन फ्लोट डेमो देखें।

फ्लोट को साफ करना

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

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

#footer ( clear: both; )

क्लियर के चार मान्य मूल्य भी हैं। मूल्य bothका सबसे अधिक उपयोग किया जाता है, जो दोनों दिशाओं से आने वाली झांकियों को साफ करता है। मूल्यों leftऔर rightक्रमशः केवल एक दिशा से फ्लोट को साफ करने के लिए इस्तेमाल किया जा सकता है। प्रारंभिक मूल्य है none, जो आम तौर पर अनावश्यक है जब तक कि यह clearनिर्धारित किए गए मूल्य को स्पष्ट रूप से हटाने के लिए उपयोग नहीं किया जाता है । मूल्य inheritतत्व को उसके माता-पिता के clearमूल्य का वारिस बनाता है । अजीब बात है, IE8 तक इंटरनेट एक्सप्लोरर ने इस मूल्य का समर्थन नहीं किया था।

केवल समाशोधन leftया rightफ्लोट, जबकि कम सामान्यतः जंगली में देखा जाता है, निश्चित रूप से इसके उपयोग हैं।

महान पतन

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

काउंटरपिनिटिव के रूप में ढहने के रूप में लग सकता है, विकल्प बदतर है। इस परिदृश्य पर विचार करें:

यदि शीर्ष पर मौजूद ब्लॉक तत्व को फ्लोट किए गए तत्व को समायोजित करने के लिए स्वचालित रूप से विस्तारित किया गया था, तो हमें पैराग्राफ के बीच पाठ के प्रवाह में एक अप्राकृतिक रिक्ति विराम होगा, इसे ठीक करने का कोई व्यावहारिक तरीका नहीं है। यदि ऐसा होता, तो हम डिजाइनर इस व्यवहार के बारे में बहुत अधिक शिकायत कर रहे होते, जितना कि हम ढहने के बारे में करते हैं।

अजीब लेआउट और क्रॉस-ब्राउज़र समस्याओं को रोकने के लिए लगभग हमेशा कोलैप करने की आवश्यकता होती है। हम इसे कंटेनर में फ्लोट किए गए तत्वों के बाद फ्लोट को साफ करके ठीक करते हैं लेकिन कंटेनर के बंद होने से पहले ।

क्लीयरिंग फ़्लोट्स के लिए तकनीक

यदि आप ऐसी स्थिति में हैं जहां आपको हमेशा पता होता है कि सफल तत्व क्या होने वाला है, तो आप clear: both;उस तत्व का मूल्य लागू कर सकते हैं और अपने व्यवसाय के बारे में जान सकते हैं। यह आदर्श है क्योंकि इसके लिए किसी फैंसी हैक्स की आवश्यकता नहीं है और कोई अतिरिक्त तत्व इसे पूरी तरह से अर्थपूर्ण नहीं बनाते हैं। बेशक चीजें आमतौर पर इस तरह से काम नहीं करती हैं और हमें अपने टूलबॉक्स में अधिक फ्लोट-क्लियरिंग टूल रखने की आवश्यकता होती है।

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

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

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

अलग-अलग परिदृश्य अलग-अलग फ्लोट समाशोधन विधियों के लिए कहते हैं। उदाहरण के लिए ब्लॉक के एक ग्रिड, विभिन्न प्रकार के प्रत्येक ले लो।

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

फ़्लोट्स की समस्या

नाजुक होने के लिए अक्सर तैरते हैं। इस नाजुकता का अधिकांश भाग IE6 और IE7 में बग से आया था। जैसा कि उन ब्राउज़रों ने अतीत में फीका किया है, ये बग उनके साथ लुप्त हो रहे हैं। लेकिन, यह अभी भी उन्हें समझने लायक है कि क्या आपको कभी "ओल्डी" डीबग करने की आवश्यकता है।

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

  

  त्वरित सुधार: सुनिश्चित करें कि आपके पास ऐसा कोई चित्र नहीं है, जो overflow: hidden;अतिरिक्त कटौती करने के लिए उपयोग करें।

• डबल मार्जिन बग - आईई 6 के साथ काम करते समय याद रखने वाली एक और बात यह है कि यदि आप फ्लोट के समान दिशा में मार्जिन लागू करते हैं, तो यह मार्जिन को दोगुना कर देगा। त्वरित फ़िक्स: display: inlineफ़्लोट पर सेट करें , और चिंता न करें कि यह ब्लॉक-स्तरीय तत्व बना रहेगा।
• 3px जोग जब पाठ है कि एक जारी तत्व के बगल में है ऊपर रहस्यमय तरीके से नाव के चारों ओर एक अजीब forcefield तरह 3px से दूर लात मारी है। त्वरित सुधार: प्रभावित पाठ पर एक चौड़ाई या ऊँचाई सेट करें।
• IE 7 में, निचला मार्जिन बग तब था जब एक तैरते हुए माता-पिता ने इसके अंदर बच्चों को तैरने दिया हो, उन बच्चों पर नीचे के मार्जिन को माता-पिता द्वारा अनदेखा किया जाता है। त्वरित सुधार: इसके बजाय अभिभावक पर नीचे की गद्दी का उपयोग करना।

वैकल्पिक

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

CSS3 ने पृष्ठ लेआउट को कुछ तरीके से निपटाया:

• फ्लेक्सबॉक्स
• मल्टी-कॉलम लेआउट
• जाली का नक्शा

बिल्कुल तैनात फ़्लोट्स (जैसे आप सामान्य रूप से बिल्कुल स्थिति है, लेकिन तत्व अभी भी अन्य तत्वों को प्रभावित करने में सक्षम है, जैसे कि इसके चारों ओर टेक्स्ट रैप है) पर चर्चा की गई थी, लेकिन मुझे लगता है कि विचार अन्य अधिक मजबूत लेआउट विचारों की समानता के कारण आश्रय था।

वीडियो

मैंने इनमें से कई फ्लोट अवधारणाओं के बारे में बताते हुए कुछ समय पहले एक पेंचकस किया था।

सम्बंधित

• clear
• position

अधिक जानकारी

• float W3C कल्पना में
• float एमडीएन में

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
सब	सब	सब	सब	सब	सब	सब