CSS क्लियरफिक्स हैक: फ्लोट एलिमेंट्स की समस्या का समाधान

CSS फ्लेक्सबॉक्स और CSS ग्रिड के युग में, हम अक्सर CSS क्लियरफिक्स पर विचार नहीं करते। फ्लेक्सबॉक्स और ग्रिड, फ्लोट्स का उपयोग करने की तुलना में एलिमेंट्स की पोजिशनिंग को थोड़ा बेहतर (और आसान!) तरीके से हल करते हैं।

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

इस लेख में, हम क्लियरफिक्स हैक का पता लगाएंगे और display: flow-root पर चर्चा करेंगे जो क्लियरफिक्स समाधान का एक नया प्रतिस्थापन है।

फ्लोट क्या है?

एक रिमाइंडर के रूप में, float प्रॉपर्टी मूल रूप से उस एलिमेंट को लेती है जिसे आप फ्लोट करना चाहते हैं और उसे उसके कंटेनर के बाएं या दाएं रखती है।

जब फ्लोट किए गए चाइल्ड एलिमेंट्स पैरेंट कंटेनर से लंबे होते हैं, तो ओवरफ्लो होता है जो फ्लॉट को क्लियर नहीं करता और क्षैतिज मार्जिन कोलैप्स हो जाते हैं। यही कारण है कि कंटेनर छोटा दिखाई देता है, फ्लोट्स जहां रखे जाते हैं, और पैराग्राफ एलिमेंट फ्लोट एलिमेंट्स के साथ-साथ दिखाई देता है।

समाधान: क्लियरफिक्स हैक

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

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

यह सिलेक्टर तीन प्रॉपर्टीज लेता है: content, display और clear। content प्रॉपर्टी के लिए एक खाली स्ट्रिंग, clear प्रॉपर्टी में both (दोनों प्रकार के फ्लोट्स के नीचे एलिमेंट का बॉर्डर ले जाता है), और डेटा/इमेजेज को पेज पर प्रस्तुत करने के लिए display को block या table पर सेट करता है।

आधुनिक समाधान: display: flow-root

फ्लेक्सबॉक्स और ग्रिड के आगमन के साथ, क्लियरफिक्स की आवश्यकता गायब हो रही है। CSS में क्लियरफिक्स को संभालने का एक नया तरीका है:

.clearfix-hack { display: flow-root; }

.clearfix-hack::after सिलेक्टर को उपरोक्त कोड से बदलें। display: flow-root हमारे लिए क्लियरफिक्स हैक करता है और हमारे कोड को और भी अधिक पठनीय बनाता है।

निष्कर्ष

हमने फ्लोट प्रॉपर्टी को चाइल्ड एलिमेंट में जोड़ने पर बनने वाले बग को ठीक करने के दो अलग-अलग तरीकों पर चर्चा की: क्लियरफिक्स हैक और display: flow-root का उपयोग। संभावना है कि आप इन हैक्स का उपयोग केवल लिगेसी कोड पर करेंगे, न कि किसी ऐसे कोड पर जिसे आप स्क्रैच से बनाते हैं, क्योंकि फ्लेक्सबॉक्स और ग्रिड के निर्माण के कारण।