एक नया ब्लॉक स्वरूपण संदर्भ बनाकर फ़्लोट तत्वों को साफ़ करना

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

कार्य

एक कंटेनर तत्व होता है जिसमें फ्लोट संपत्ति के मूल्य के साथ एक तत्व होता है जो बाईं ओर सेट होता है। स्पष्टता के लिए, कंटेनर में एक सीमा और पृष्ठभूमि होती है।


jsFiddle

जैसा कि आप उदाहरण से देख सकते हैं, कंटेनर ढह गया - इसकी गणना की गई ऊंचाई शून्य पर सेट है। यह मामला अक्सर टाइपसेटिंग में पाया जाता है, हर कोई इसका उपयोग करता है और एक लेआउट डिजाइनर को ढूंढना मुश्किल है, जिसने ऐसी स्थिति का सामना नहीं किया है।

ऐसा क्यों हो रहा है?

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

निर्णय

इस समस्या को हल करने के लिए कई विकल्प हैं।

सबसे स्पष्ट फ्लोट तत्व के बाद ब्लॉक को संबंधित स्पष्ट संपत्ति मूल्य के साथ रखना है। इस मामले में, ब्लॉक स्पष्ट संपत्ति की परिभाषा से फ्लोट तत्व के नीचे स्थित है, और कंटेनर इस तत्व की स्थिति के आधार पर ऊंचाई की गणना करता है।

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


jsFiddle

वास्तव में, सब कुछ जगह में गिरता है, कंटेनर आंतरिक तत्व की ऊंचाई को स्वीकार करता है, लेकिन यह कैसे काम करता है?

व्याख्या

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

तथ्य यह है कि इन सभी मामलों में, कंटेनर के अंदर एक नया ब्लॉक प्रारूपण संदर्भ बनाया जाता है।
एक ब्लॉक स्वरूपण संदर्भ - उस बॉक्स की तरह जिसमें चीजें स्थित हैं - यदि उसी प्रकार का एक और बॉक्स पास में स्थित है, तो पहली से चीजें दूसरे में चीजों की स्थिति को प्रभावित नहीं कर सकती हैं।



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

यदि यह आपका पहली बार ब्लॉक स्वरूपण संदर्भ की अवधारणा का सामना कर रहा है, तो निम्न व्यावहारिक समस्या को हल करने का प्रयास करें: jsFiddle ।

इसलिए, हमने संदर्भ की अवधारणा को समझा। अब हम निम्नलिखित प्रश्न का उत्तर देंगे - क्यों ब्लॉक प्रारूपण संदर्भ बनाते समय, कंटेनर की ऊंचाई निर्धारित करने के लिए फ्लोट तत्वों को ध्यान में रखा जाता है?

तथ्य यह है कि यह मामला विनिर्देश में अलग से निर्दिष्ट है। नए ब्लॉक प्रारूपण संदर्भ बनाने वाले और ऊंचाई वाले ब्लॉकों के लिए: ऑटो (मुझे फिर से आपको याद दिलाएं कि यह मान डिफ़ॉल्ट रूप से सेट है), निम्न नियम लागू होता है ( विनिर्देशन के लिए लिंक ):

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

संक्षेप में, जब एक नया ब्लॉक स्वरूपण संदर्भ बनाने वाले तत्व की ऊंचाई निर्धारित करते हैं, तो सीधे बच्चे के फ्लोट तत्वों की ऊंचाई को ध्यान में रखा जाता है (और, निश्चित रूप से, हमेशा की तरह, एक सामान्य प्रवाह में भाग लेने वाले तत्व)।

जब एक नया ब्लॉक प्रारूपण संदर्भ बनाया जाता है

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

• फ्लोट तत्व;
• पूरी तरह से तैनात तत्व;
• निश्चित तत्व (क्योंकि स्थिति: निश्चित - एक तरह की पूर्ण स्थिति, विनिर्देश का लिंक );
• अंदर एक ब्लॉक कंटेनर का प्रतिनिधित्व करने वाले तत्व, लेकिन बाहर एक अलग संरचना (जैसे इनलाइन-ब्लॉक, टेबल-सेल, टेबल-कैप्शन);
• दृश्य को छोड़कर किसी भी मूल्य पर ओवरफ्लो सेट के साथ ब्लॉक;
• फ़ील्डसेट तत्व (अधिकांश ब्राउज़र में)।

कुल मिलाकर

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