🌞 🥐 🖍️ फ्लोट संपत्ति पर विवरण 🏠 🙇🏼 👨🏾‍🍳

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

एक नाव क्या है?

CSS में कुछ तत्व blocky हैं और इसलिए एक नई लाइन पर शुरू होते हैं। उदाहरण के लिए, यदि आप P टैग के साथ दो पैराग्राफ रखते हैं, तो वे एक-दूसरे के नीचे होंगे। अन्य तत्व "लोअरकेस" हैं, अर्थात् पृष्ठ पर एक पंक्ति में प्रदर्शित किया गया।

रैप के प्रकार के लिए तत्वों को फिर से असाइन करने का एक तरीका फ्लोट संपत्ति का उपयोग करना है। एक क्लासिक उदाहरण फ्लोट का उपयोग बाईं या दाईं ओर एक तस्वीर संरेखित करने के लिए है। यहाँ एक सरल HTML छवि और पैराग्राफ कोड है:

<img src="http://lorempixum.com/200/200/" /> <p>Lorem ipsum...</p>

उन्हें एक नई पंक्ति से प्रदर्शित किया जाता है:

छवि में कुछ सीएसएस जोड़ें:

 img { float: right; margin: 20px; }

यह सही संरेखण निकला:

यदि अधिक पाठ है, तो पैराग्राफ छवि के चारों ओर लपेटेगा:

मान लें कि हमें चित्र और पाठ के बीच 20 पिक्सेल इंडेंट करने की आवश्यकता है। यह डिजाइन काम नहीं करेगा:

 p {margin: 20px;}

यह इस तरह सही है:

 img {margin: 20px;}

पैराग्राफ के लिए इंडेंटेशन काम क्यों नहीं करता है? इसका पता लगाने के लिए, एक फ्रेम जोड़ें:

 p { border: solid 1px black; }

परिणाम आपको आश्चर्यचकित कर सकता है:

यह पता चला है कि चित्र पैराग्राफ के अंदर है! इसलिए, मार्जिन संपत्ति पहले मामले में काम नहीं करती है। इसे ठीक करने के लिए, आप फ़्लोट लागू कर सकते हैं: पैराग्राफ़ पर छोड़ दिया और निरपेक्ष चौड़ाई निर्दिष्ट करें:

 img { float: right; margin: 20px; } p { float: left; width: 220px; margin: 20px; }

अजीब फ्लोट नियम

आइए फ्लोट के अधिक जटिल उपयोगों पर जाएं: फ्लोटिंग ऑब्जेक्ट्स को नियंत्रित करने वाले नियम। यह कभी-कभी छवि गैलरी के लेआउट में आवश्यक होता है। उदाहरण के लिए:

 <ul> <li><img src="1450823466601083332032"/></li> <li><img src="http://placehold.it/100x150&text=2"/></li> <li><img src="1450823466394721548724"/></li> <li><img src="1450823466376067888878"/></li> <li><img src="1450823466279266032276"/></li> <li><img src="http://placehold.it/100x150&text=6"/></li> <li><img src="http://placehold.it/100x100&text=7"/></li> </ul>

डिफ़ॉल्ट रूप से, सूची में प्रत्येक आइटम एक नई लाइन पर दिखाई देता है। यदि हम फ्लोट लागू करते हैं: प्रत्येक के लिए छोड़ दिया गया है, तो चित्र एक पंक्ति में एक पंक्ति विराम के साथ दिखाई देंगे:

 li { float: left; margin: 4px; }

लेकिन क्या होगा अगर छवियां अलग-अलग ऊंचाइयों की हैं?

यदि हम सूची आइटम में एकल लाइन डिस्प्ले जोड़ते हैं, तो हमें थोड़ा प्रेट्रियर मिलता है:

 li { display: inline; }

और अब लंबवत संरेखित करें:

 img { vertical-align: top; }

यह याद रखना चाहिए कि एक उच्च छवि ऊंचाई के मामले में, शेष छवियां केवल एक पिछले एक के आसपास बहती हैं, उदाहरण के लिए:

तत्वों के क्रम को बदलने का एक उदाहरण - उदाहरण के लिए, हमारे पास क्रम में तत्वों की एक सूची है:

 <ul> <li><img src="1450823466601083332032"/></li> <li><img src="http://placehold.it/100x100&text=2"/></li> <li><img src="1450823466394721548724"/></li> <li><img src="1450823466376067888878"/></li> <li><img src="1450823466279266032276"/></li> <li><img src="http://placehold.it/100x100&text=6"/></li> </ul>

यदि हम उन्हें रिवर्स ऑर्डर में व्यवस्थित करना चाहते हैं, तो हम फ्लोट का उपयोग करते हैं: फ्लोट के बजाय दाईं ओर: बाएं, और हमें HTML में ऑर्डर को बदलना नहीं है:

फ़्लोट का उपयोग करना पृष्ठ पर समूह तत्वों के लिए सुविधाजनक है, लेकिन बड़ी समस्या यह है कि बाद के तत्वों (पाठ या ब्लॉक) को एक रैपिंग संपत्ति भी मिलती है। उदाहरण के लिए, हमारे पास चित्रों का एक ब्लॉक है:

इसके नीचे का पाठ पूरे ब्लॉक के चारों ओर प्रवाहित होने लगता है:

इससे बचने के लिए, आपको स्पष्ट संपत्ति का उपयोग करना चाहिए। यदि दूसरी छवि पर लागू होता है:

 ul li:nth-child(2) { clear: left; }

हम यहाँ हैं कि:

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

आपको स्पष्ट लागू करने की आवश्यकता है: दोनों पैराग्राफ के लिए:

 p { clear: both; }

हमारी समस्या हल हो गई है:

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

 ul { background: gray; }

लेकिन अगर आप फ्लोट लागू करते हैं: सूची आइटम पर छोड़ दिया जाता है, तो पृष्ठभूमि पूरी तरह से गायब हो जाती है:

यदि हम पहली बार UL के लिए ऊंचाई निर्धारित करते हैं:

 ul { height: 300px; }

यह भी समस्या का समाधान नहीं करता है, क्योंकि पृष्ठभूमि आयाम निरपेक्ष हैं। क्लीयरफिक्स क्लास हमारी मदद करेगी, जो यूएल तत्वों के समान स्तर पर div पर लागू होगी।

 .clearfix { clear: both; }

अतिप्रवाह का उपयोग करके एक और समाधान है:

 ul { overflow: auto; }

फ्लोट तत्वों के नौ नियम:

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

फ्लोट संपत्ति पर विवरण

एक नाव क्या है?

अजीब फ्लोट नियम

फ्लोट तत्वों के नौ नियम:

More articles: