फ्लोट उन्माद: सीएसएस फ्लोट संपत्ति कैसे काम करती है, इसका स्पष्टीकरण

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

त्याग

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

फ्लोट वाले एक तत्व के गुण जिसे आपको हमेशा ध्यान में रखना चाहिए

अगर बाएं या दाएं पर सेट है

• तत्व को एक ब्लॉक के रूप में प्रदर्शित किया जाता है , जैसे कि इसका प्रदर्शन था: ब्लॉक संपत्ति सेट;
• एक तत्व सामग्री के आकार में चौड़ाई में संकुचित होता है , जब तक कि तत्व के लिए चौड़ाई स्पष्ट रूप से निर्धारित न हो;
• तत्व बाएं (बाएं) या दाएं किनारे (दाएं) से चिपक जाता है;
• HTML कोड में आने वाले सभी पेज कंटेंट को फ्लोट के साथ तत्व के चारों ओर लपेटने के बाद ;

जीवन का मामला # 1

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

कारण

यदि ऐसा होता है, तो आपने फ्लोट को पहले नहीं, बल्कि दूसरे ब्लॉक पर लागू किया। इस तथ्य के कारण कि फ्लोटिंग तत्व (फ्लोट वाला) केवल उन तत्वों के चारों ओर लपेटा जाता है जो इसके बाद HTML कोड में जाते हैं, पहला ब्लॉक इसके चारों ओर नहीं बहेगा।

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

निर्णय

HTML कोड में ब्लॉक स्वैप करें , ब्लॉक को फ्लोट के साथ पहले डालें।

जीवन का मामला # 2

हेडर / कंटेंट / फूटर में मेरे दो ब्लॉक हैं। मैंने फ्लोट बनाया: एक के लिए छोड़ दिया, फ्लोट: दूसरे के लिए सही। लेकिन उसके बाद, साइट की सभी सामग्री मंगाई गई।

कारण

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

इसके अलावा, फ्लोटिंग तत्वों के बाद HTML में जाने वाली सभी साइट सामग्री उनके चारों ओर घूमती है, जो अक्सर एक अप्रत्याशित प्रभाव की ओर ले जाती है।

निर्णय

समाधान # 1। स्पष्ट रूप से कंटेनर की ऊंचाई निर्धारित करें । ऐसे मामलों में जहां यह जाना जाता है कि कंटेनर का आकार क्या होना चाहिए, यह सबसे सरल उपाय है।

समाधान # 2। खाली ब्लॉक को स्पष्ट के साथ जोड़ें: दोनों । इस तरह के एक तत्व को जोड़ने से ब्लॉकों की "उछाल" साफ हो जाती है और कंटेनर को अपनी पूरी ऊंचाई तक फैलने का कारण बनता है। शब्दार्थ, यह सबसे अच्छा समाधान नहीं है, क्योंकि यह एक अतिरिक्त मार्कअप तत्व का परिचय देता है।

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

युपीडी
फ्लोट संपत्ति की चर्चा को जारी रखने के रूप में सेलेनिट 2 से एक दिलचस्प लेख भी पढ़ें।