✨
यह लेख एक बड़ी श्रृंखला का हिस्सा है जो मेरी अपनी वेबसाइट पर उपलब्ध है। सीएसएस 101: द सीरीज के बारे में अधिक जानने के लिए यहां क्लिक करें। यह पूरी तरह से मुफ़्त है!

अतीत के एक विस्फोट में आपका स्वागत है! फ्लेक्सबॉक्स और ग्रिड के आधुनिक वेब डिज़ाइन के सुपरहीरो की तरह आने से पहले, एक समय था जब फ़्लोट्स और क्लियर्स ने सीएसएस ब्रह्मांड पर शासन किया था। यदि आप वेब डिज़ाइन में नौसिखिया हैं, तो आप सोच रहे होंगे, "फ़्लोट्स और क्लियर्स क्या हैं, और मुझे इसकी परवाह क्यों करनी चाहिए?" खैर, कमर कस लें, क्योंकि हम सीएसएस इतिहास के माध्यम से एक पुरानी यादों वाली यात्रा पर जाने वाले हैं।

स्पॉइलर: आपको आज उपयोग करने के लिए कुछ अच्छी तरकीबें मिल सकती हैं!

फ़्लोट्स: मूल लेआउट चालबाज

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

img {
    float: left;
    margin-right: 15px;
}

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

क्लीयर: द पीसकीपर्स

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

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

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

विरासत लेआउट तकनीक: एक रेट्रो पुनरुद्धार

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

• इनलाइन-ब्लॉक: क्षैतिज लेआउट बनाने की एक सरल विधि। तत्वों को प्रदर्शित करने के लिए सेट करके: इनलाइन-ब्लॉक;, आप फ़्लोट की आवश्यकता के बिना उन्हें एक साथ पंक्तिबद्ध कर सकते हैं।

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• टेबल लेआउट: हां, टेबल सिर्फ सारणीबद्ध डेटा के लिए नहीं थे! आप डिस्प्ले: टेबल;, डिस्प्ले: टेबल-रो;, और डिस्प्ले: टेबल-सेल; का उपयोग कर सकते हैं। ग्रिड जैसे लेआउट बनाने के लिए.

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

ये तरीके काफी हद तक आधुनिक लेआउट तकनीकों से प्रभावित हो गए हैं, लेकिन फिर भी ये वेब डिज़ाइन के विकास की एक झलक पेश करते हैं।

आधुनिक समय का अनुप्रयोग: पुराने और नए का मिश्रण

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

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

इसे लपेट रहा है

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

हैप्पी कोडिंग!

✨
अरे! यदि आपने जो पढ़ा वह आपको पसंद आया, तो आपको सीएसएस 101: द सीरीज को चेकआउट करने के लिए यहां क्लिक करना चाहिए। यह पूरी तरह से मुफ़्त है!