फ्लोट का आकार न बदलने का रहस्य

सीएसएस फ्लोट का उपयोग करते समय, धारणा यह है कि बाद के तत्व एक नए पर प्रवाहित होने के बजाय बाईं ओर संरेखित होंगे रेखा। हालाँकि, कुछ परिदृश्यों में, जैसे कि प्रदान किया गया उदाहरण, निम्नलिखित div पहले div के दाईं ओर शुरू होने के बजाय पूरी चौड़ाई में फैला रहता है।

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

इसलिए, यदि ब्लॉक-स्तरीय तत्व (जैसे .yellow div) की पृष्ठभूमि है, तो यह फ्लोटेड तत्व के माध्यम से विस्तारित होगा। &&&]

संकल्प

सीएसएस स्तर 2.1 के अनुसार, कुछ गुणों वाले तत्व (ब्लॉक-स्तरीय प्रतिस्थापन, एक नया ब्लॉक फ़ॉर्मेटिंग संदर्भ स्थापित करने वाले तत्व) को मार्जिन बॉक्स को ओवरलैप नहीं करना चाहिए कोई भी एक ही संदर्भ में तैरता है। .येलो डिव में "दृश्यमान" के अलावा एक "ओवरफ़्लो" प्रॉपर्टी जोड़ने से यह फ़्लोट किए गए तत्व को ओवरलैप करने से रोकता है।

जब ओवरलैपिंग उपयोगी हो सकती है

यह महत्वपूर्ण है ध्यान दें कि ओवरलैपिंग उन स्थितियों में फायदेमंद हो सकती है जहां फ़्लोट किए गए तत्व के बाद की सामग्री सामान्य रूप से जारी रखने के लिए पर्याप्त लंबी है। सामग्री को डिफ़ॉल्ट रूप से प्रतिबंधित करने के परिणामस्वरूप यह फ़्लोट किए गए तत्व के अंतर्गत प्रवाहित नहीं हो सकता है।